/* ══ v181 — 질문 입력(1b) · 결과(4b) 개편 ═══════════════════════════════════
   짝: js/19-v181-question-result.js · 시안: design-kit/screens/6ix-0{1,3}-*.html
   값의 근거: design-kit/screens/HANDOFF.md (색·크기·여백은 그 문서가 최종값)

   ★ css/21 다음에 실린다. 21 이 이미 !important 사슬을 여러 겹 깔아 두었으므로
     여기서도 필요한 곳은 !important 로 못박는다 — 특이도를 올리는 것보다
     "마지막 층이 이긴다"를 지키는 편이 다음 사람에게 읽힌다.
   ★ 대기 화면(#wzyCastVeil 계열)은 손대지 않는다 — 현행이 확정이다.          */

:root{
  --v181-accent:#9184d9;
  --v181-accent-600:#796cbf;
  --v181-accent-400:#b5abfc;
  --v181-lead:#5d5294;
  --v181-ink:#292b31;
  --v181-muted:#595d6c;
  --v181-muted-strong:#3f424d;
  /* 가장 흐린 단을 내렸다 (2026-08-14 라이트 깊은 화면 검수).
     #a29ebb 는 흰 카드 위 2.58 · 연보라 면(#f5f4ff) 위 2.50 이라 기준(4.5) 근처도 아니었다.
     이 색이 '흐름 · 시기 · 괘 이야기' 같은 **절 제목**과 '본괘 · 지금' 라벨을 칠하고 있었다.
     #6f6a8c 는 5.16 / 4.73 이고 색상은 같은 보라회색이다. 아래 --v181-faint 와 같은 값이다
     (둘은 처음부터 같은 색이었다 — 이름만 둘이다). 다크는 제 값(#8b83ad)이 따로 있다. */
  --v181-ink3:#6f6a8c;
  --v181-surface:#f5f4ff;
  --v181-line:rgba(145,132,217,.28);
  --v181-line-strong:rgba(145,132,217,.42);
  --v181-rule:#e6e1f5;
  /* 아래 넷은 쓰이면서도 정의가 없었다(2026-08-04 실측) —
     그래서 어두운 화면에서 흰 카드에 흰 글씨가 나왔다. */
  --v181-card:#fff;
  --v181-body:#4a4463;
  --v181-faint:#6f6a8c;      /* 위 --v181-ink3 와 같은 값 — 함께 내렸다 (2026-08-14) */
  --v181-badge-ink:#5b4fa8;
}

/* 어두울 때 — 규칙을 다시 쓰지 않고 색의 출처만 바꾼다.
   기기가 어두우면 저절로 켜지므로(기본값 '시스템 따라감') 빠뜨릴 수 없는 화면이다.
   값은 카드 바탕(#221d38) 위에서 잰 대비로 골랐다 — 본문 8.7, 보조 6.0, 작은 라벨 3.9. */
body.dark-mode{
  --v181-ink:#f1ecff;
  --v181-body:#c3bcd8;
  --v181-muted:#a49bbe;
  --v181-muted-strong:#bab2d2;
  --v181-lead:#b5a8f2;
  --v181-ink3:#8b83ad;
  --v181-faint:#8b83ad;
  /* 카드 바탕을 사이트 공용 팔레트로 (2026-08-04, 사용자 지시).
     육효만 자주색 카드(#221d38 · #1b1730)를 써서 다른 앱을 오갈 때 혼자 튀었다.
     값만 바꾼다 — 규칙은 그대로다. 팔레트를 못 읽는 곳에서는 뒤의 값으로 돈다. */
  --v181-card:var(--wz-d-bg2,#1c1e30);
  --v181-surface:var(--wz-d-panel2,rgba(28,30,46,.88));
  --v181-rule:#2a2d42;
  --v181-line:rgba(160,146,230,.26);
  --v181-line-strong:rgba(160,146,230,.40);
  --v181-accent:#a89bf0;
  --v181-badge-ink:#cabffc;
}

/* ══════════ 1b · 질문 입력 ══════════════════════════════════════════════ */

/* 히어로 — 소개가 접히며 전체가 낮아진다 */

/* 소개 접힘 — 위아래 가는 선, 우측 +/− */
html.v181 .v181Fold{
  border-top:1px solid rgba(145,132,217,.18);
  border-bottom:1px solid rgba(145,132,217,.18);
  margin:14px 0 0;
}
html.v181 .v181Fold > summary{
  list-style:none; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 2px; font-size:12px; font-weight:600; color:var(--v181-muted-strong); cursor:pointer;
}
html.v181 .v181Fold > summary::-webkit-details-marker{ display:none }
html.v181 .v181Fold > summary::after{ content:'+'; font-size:15px; color:var(--v181-accent) }
/* (걷어냄 67행) 열린 상태 기호 — 더하기표 하나로 통일했다. */
/* 접힘 안으로 들어간 소개는 히어로 안에서 쓰던 여백·가운데 정렬을 버린다 */
html.v181 .v181Fold .wzyIntro{
  max-width:none !important; margin:0 !important; padding:0 2px 14px !important;
  text-align:left !important; font-size:12.5px !important; line-height:1.8 !important;
}

/* 질문 칸 — 두 줄까지 보이는 textarea */
html.v181 textarea#title.v181Q{
  width:100%; min-height:62px; resize:none;
  background:var(--v181-card); border:1px solid var(--v181-line-strong); border-radius:14px;
  padding:13px 14px; font-family:inherit; font-size:15px; font-weight:600; line-height:1.6;
  color:var(--v181-ink);
}
html.v181 textarea#title.v181Q::placeholder{ color:#aa9bc8; font-weight:400 }
/* 라벨 줄 — '질문 [필수]' 한 덩어리.
   오른쪽에 있던 '한 번에 한 가지'는 걷었다(2026-08-04, 사용자 지시) —
   아래 예시 문구가 어떻게 적는지를 이미 보여 주고 있어 같은 말이 두 번이었다. */
html.v181 .field.titleField .wzyFieldLab{
  display:flex !important; align-items:center; gap:4px;
}
/* 히어로 아래 숨 돌릴 틈 — 안내 두 줄과 질문 칸이 붙어 있었다(사용자 지시) */
html.v181 .field.titleField{ margin-top:var(--s3) !important }

/* 예시 칩 */
html.v181 .v181Chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px }
html.v181 .v181Chip{
  background:transparent; border:1px solid rgba(145,132,217,.32); color:var(--v181-lead);
  font-family:inherit; font-size:11.5px; line-height:1.4; border-radius:99px;
  padding:6px 11px; cursor:pointer;
}
html.v181 .v181Chip:hover{ background:rgba(145,132,217,.10) }

/* 용신 확인 줄 — 자리를 늘 예약한다(질문이 비어도 아래가 안 출렁이게) */
html.v181 .v181Slot{ min-height:38px; margin-top:9px }
html.v181 .v181Topic{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:7px 11px; border-radius:10px; font-size:12px; line-height:1.5;
  background:rgba(145,132,217,.10); border:1px solid rgba(145,132,217,.20);
}
html.v181 .v181Topic b{ font-weight:700 }
html.v181 .v181Topic button{
  flex:none; cursor:pointer; border:1px solid rgba(145,132,217,.34); background:transparent;
  color:inherit; border-radius:999px; padding:3px 10px;
  font-family:inherit; font-size:11.5px; font-weight:600;
}
html.v181 .v181Topic.ask{ background:rgba(224,169,42,.12); border-color:rgba(224,169,42,.34) }
html.v181 .v181Topic.ask button{ border-color:rgba(224,169,42,.5) }

/* 작괘 방식 2버튼 제거 · 수동은 밑줄 한 줄 */
html.v181 .v181Hide{ display:none !important }
html.v181 .v181ManualWrap{ margin-top:18px; text-align:center }
html.v181 .v181Manual,
html.v181 .v181Quiet{
  background:transparent; border:0; padding:6px 0; cursor:pointer; font-family:inherit;
  font-size:12px; font-weight:500; color:var(--v181-muted);
  text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(145,132,217,.4);
}
html.v181 .v181Quiet{ font-size:11.5px; color:var(--v181-lead); text-decoration:none }

/* 괘 뽑기 — 꽉 찬 보라 면 (2026-08-03, 첫 화면 통일안 1a).
   전에는 옅은 면 + 테두리였다. 다섯 서비스 어디에도 면으로 칠한 주 단추가 없어
   '무엇을 먼저 누르는 곳인지'가 안 보였다 — 화면에 면 단추는 하나뿐이어야 그게 보인다.
   ★ 색은 공통 #6d5ae6 이다. 육효만 쓰는 --v181-accent(#9184d9 계열)를 쓰지 않는다.
     다섯이 같은 보라여야 '같은 뜻은 같은 모양'이 성립한다.
   ★ css/21 의 #mode-random .btn.primary (1,2,1) 가 html.v181 #randomMake (1,1,1) 보다 세다 —
     면이 transparent 로 남았다(실측). 같은 꼴로 맞추고 뒤에 서서 이긴다. */
html.v181 #mode-random .btn.primary#randomMake,
html.v181 #randomMake{
  width:100%; padding:12px 16px !important; min-height:43px !important;
  border-radius:10px !important; font-size:14.5px !important;
  font-weight:700 !important; letter-spacing:0 !important; color:#fff !important;
  background:#6d5ae6 !important; background-image:none !important; border:0 !important;
}

/* 히어로 네 줄 — 눈썹·이름·약속을 다섯 서비스 공통 규격으로 (통일안 1a).
   눈썹이 라틴+한자(Six lines · 六爻)였다. 한자 표식은 쓰지 않는다(원칙 7). */
html.v181 .wzyKicker{
  font-size:13px !important; font-weight:400 !important; letter-spacing:.42em !important;
  color:#5d5294 !important; text-transform:none !important;
  margin:0 0 6px !important;   /* 10→6 (2026-09-08 v0.7.2) */
}
/* ★ 이 색은 **라이트 전용 값**이었다 (2026-08-14, 디자인 점검에서 잡음).
   테마 구분 없이 박혀 있어 어두운 화면에서 대비가 2.6 이었다(밝은 화면은 6.77 로 멀쩡).
   같은 보라 계열에서 밝기만 올려 4.6 으로 맞춘다. 밝은 화면 값은 그대로 둔다. */
html.v181 body.dark-mode .wzyKicker{ color:#857bb6 !important }
/* 섹션 머리 '무엇이 궁금한가요?' — 히어로 약속과 같은 말을 두 번 한다. 걷는다. */
html.v181 .questionSetupHead{ display:none !important }
html.v181 #mode-random .castLeadHint{
  margin:9px auto 0 !important; max-width:24em; text-align:center; text-wrap:balance;
  font-size:11.5px !important; line-height:1.7 !important; color:var(--v181-muted) !important;
}

/* '최근 작괘'는 기록 오버레이(⋮ → 기록)가 맡는다 — 첫 화면 규칙은 걷었다 (2026-08-03) */

/* ══════════ 4b · 결과 ═══════════════════════════════════════════════════ */

/* 자리 — DOM 은 그대로 두고 order 만 바꾼다 */
#resultPanel #v181Brow{ order:-72 !important }
#resultPanel #wzyV2Asked{ order:-70 !important }
#resultPanel #lightSummaryPanel{ order:-60 !important }
#resultPanel #v181Steps{ order:-56 !important }
#resultPanel #v181Bar-gua{ order:-50 !important }
#resultPanel .wzyGuaPair{ order:-49 !important }
#resultPanel #wzyV2Origin{ order:-48 !important }
#resultPanel #v181Bar-why{ order:-30 !important }
#resultPanel #autoPanel{ order:-29 !important }

/* 제목·자세히보기는 접힘 둘이 대신한다 */
html.v181 #wzyV2Sechead h2,
html.v181 #wzyV2Sechead .wzyPair,
html.v181 #wzyV2Sechead .wzyYong2,
html.v181 #wzyV2More{ display:none !important }
html.v181 #wzyV2Sechead{ margin:0 !important; padding:0 !important }

/* 눈썹 줄 */
html.v181 #v181Brow{ display:flex; align-items:center; justify-content:space-between; gap:10px }
html.v181 #v181Brow .l{
  font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--v181-ink3);
}
html.v181 #v181Brow .r{ font-size:11px; color:var(--v181-muted); white-space:nowrap }

/* ── 답 카드 (2026-08-04 시안 규격으로 교체) ─────────────────────────────
   ★ 한 줄 답은 두세 줄까지 흐르는 것을 전제로 잡는다(실측: 실제 결과가 그렇다).
   ★ text-wrap 은 쓰지 않는다 — balance·pretty 는 줄 길이를 고르게 만들려고
     오른쪽을 비운 채 일찍 넘긴다. 읽는 글은 영역 끝까지 채우는 편이 자연스럽다. */
html.v181 .lightDecisionCard .lightDecisionTitle{
  font-size:14.5px !important; font-weight:800 !important; line-height:1.55 !important;
  letter-spacing:-.01em !important; color:var(--v181-ink) !important;
}
/* 이유 — 【결론】이 2~3문장이라 여기가 가장 길게 흐른다 */
html.v181 .lightDecisionCard .lightDecisionText{
  font-size:13px !important; line-height:1.7 !important; color:var(--v181-body) !important;
}
/* 판정 — 등급마다 색을 나누지 않는다. 좋고 나쁨은 문장이 이미 말한다 */
html.v181 .lightVerdictBadge{
  font-size:12px !important; font-weight:800 !important; border-radius:999px !important;
  padding:3px 9px !important;
  background:rgba(145,132,217,.14) !important; border-color:rgba(145,132,217,.34) !important;
  color:var(--v181-badge-ink) !important;
}
html.v181 .lightVerdictScore{
  font-size:11.5px !important; font-weight:700 !important; color:var(--v181-muted) !important;
  font-variant-numeric:tabular-nums;
}
html.v181 .lightVerdictScore b{ font-size:22px !important; font-weight:800 !important;
  letter-spacing:-.02em !important; color:var(--v181-body) !important }

/* 이렇게 해 보세요 */
html.v181 #v181Steps{ border-top:1px solid var(--v181-rule); padding-top:14px }
html.v181 #v181Steps .h{
  margin:0 0 10px; font-size:12px; font-weight:700; letter-spacing:.12em;
  color:var(--v181-ink3); text-transform:uppercase;
}
html.v181 .v181StepList{ display:flex; flex-direction:column; gap:10px; font-size:13.5px; line-height:1.6 }
html.v181 .v181StepList > div{ display:flex; gap:9px; color:var(--v181-muted-strong) }
html.v181 .v181StepList .n{ flex:none; color:var(--v181-accent); font-weight:700 }

/* 접힘 바 둘 */
/* 접힘 — 시안 규격(13.5/700 · radius 12 · 카드 배경). 선 하나였던 것을 칸으로 세운다.
   누를 수 있는 자리는 눌러도 되게 생겨야 한다. */
html.v181 .v181Bar{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:10px; padding:13px 14px; background:var(--v181-card);
  border:1px solid var(--v181-line-strong); border-radius:12px;
  font-family:inherit; font-size:13.5px; font-weight:700; color:var(--v181-body);
  cursor:pointer; text-align:left;
}
html.v181 .v181Bar:hover{ border-color:#6d5ae6 }
html.v181 .v181Bar::after{ content:'+'; font-size:15px; color:var(--v181-accent-600) }
html.v181 body.v181-gua-open .v181BarGua::after,
html.v181 body.v181-why-open .v181BarWhy::after{ content:'−' }

/* 접힘 대상 — 열림 상태는 body 클래스, 보임/숨김은 여기서.
   ★ 괘 그림(.wzyGuaPair)은 이 목록에서 뺐다 (2026-08-04) — 시안은 답 위에 늘 펼쳐 둔다.
     접혀 있으면 "무슨 괘가 나왔는지"를 한 번 더 눌러야 볼 수 있었다. */
html.v181 body:not(.v181-gua-open) #wzyV2Origin,
html.v181 body:not(.v181-why-open) #autoPanel{ display:none !important }
/* 괘 그림이 늘 보이므로 '어떤 괘가 나왔나요' 접힘은 같은 것을 두 번 말하게 된다. 걷는다. */
html.v181 .v181BarGua{ display:none !important }

/* 괘쌍 — 지괘(앞으로)를 진하게, 본괘(지금)를 한 단 흐리게 (2026-08-04, 사용자 지시).
   눈이 먼저 가야 할 쪽은 '앞으로'다. 물은 것이 지금이 아니라 가는 쪽이기 때문이다. */
html.v181 .wzyGua .wzyYang,
html.v181 .wzyGua .wzyYin > i{ background:var(--v181-accent-400) !important }
html.v181 .wzyGua.alt .wzyYang,
html.v181 .wzyGua.alt .wzyYin > i{ background:var(--v181-accent-600) !important }
html.v181 .wzyArrow{ color:var(--v181-accent-400) !important }

@media (prefers-reduced-motion: reduce){
  html.v181 *{ transition:none !important }
}

/* ═══ 화면 아래 회색 띠 (2026-08-03, 사용자 지적: 스크롤 중간에서 왔다갔다 하면 보임) ══
   원인은 그라데이션이 아니라 **하단 탭바 #v122nav** 다. v180 이 탭바를 쓰지 않기로 하고
   내용만 비웠는데 요소는 position:fixed 로 남아 있었다 —
   
   가 화면 밑에 깔려, 그 위를 글이 지날 때 흐릿한 띠로 보였다.
   ★ 지우지 않고 감춘다 — js/12 가 이 요소를 참조한다(wzyRecords 가 탭 버튼을 클릭한다). */
html.v181 #v122nav{
  display:none !important;
  background:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  border-top:0 !important; box-shadow:none !important;
}

/* 보관 키 조회 (2026-08-03) — 평소엔 조용한 한 줄, 누르면 열린다 */
/* 조회 칸(.v181Key*)의 규칙은 걷었다 (2026-09-17, 보관 키 완전 폐지). 지난 리딩은 ?key= 로만 연다. */

/* 수동 작괘를 걷었다 (2026-08-03, 사용자 결정 ⓐ) — 화면과 세그를 함께 감춘다.
   요소는 지우지 않는다: js/05 가 참조하고, ?v181=off 면 그대로 돌아온다. */
html.v181 #mode-manual,
html.v181 .wzyModes{ display:none !important }

/* 본문 폭을 다섯 서비스 공통으로 (2026-08-03, 첫 화면 통일안 1a).
   실측(화면 490px): 이 앱 430 · 동양타로 378 — 52px 갈렸다. 같은 사이트인데
   서비스를 옮기면 본문이 움직였다. 시안(first-screen-1a)이 384px 로 그려져 있어
   좌우 여백 16씩을 더한 416 으로 맞춘다. */
html.v181 .shell{ max-width:416px !important }   /* 시안 본문 384 + 좌우 여백 16 */

/* ── 히어로를 '우주 타로'와 같은 규격으로 (2026-08-03, 사용자 요청) ──────────
   실측(타로): 제목 34px / 700 / Pretendard Variable / #292b31,
              주 단추 높이 43 · 14.5px / 700 · radius 10.
   글꼴은 다섯 앱이 이미 Pretendard 를 공유하므로 크기·굵기만 맞추면 같은 얼굴이 된다. */
html.v181 .wzyMark{
  font-size:30px !important; line-height:1.33 !important; text-align:center;
  color:#796cbf !important; margin:0 0 14px !important;
}
html.v181 .wzyHeroInner .brand h1,
html.v181 #appTitle{
  font-size:34px !important; font-weight:700 !important; letter-spacing:normal !important;
  line-height:1.2 !important;
}

/* ── 결과 화면 중복 정리 (2026-08-03, 사용자 지적: 결과가 엉망) ────────────────
   실측하니 같은 말이 세 번씩 나오고 있었다.
     주제(오늘운세)  ① 위 배지 ② 결론 줄 오른쪽 ③ 답 카드 안
     질문            ① wzyV2Asked ② 답 카드 안 「…」
   한 번씩만 남긴다. 남기는 자리는 **가장 크고 먼저 읽히는 곳**이다.

   ① 결론 줄(v181Brow) — '우주 육효 · 작괘 결과'는 상단 바가 이미 말하고,
      '용신 · 오늘운세'는 바로 위 배지가 말한다. 통째로 걷는다(높이 13px 짜리 군더더기였다). */
html.v181 #v181Brow{ display:none !important }

/* ② 답 카드 맨 위의 「질문」 — 바로 위 wzyV2Asked 가 같은 질문을 더 크게 보여 준다.
   답 카드는 '답'만 말하게 둔다. */
html.v181 .lightQuoted{ display:none !important }

/* ③ 답 카드 안의 주제 배지 — 위 배지와 겹친다. 등급·점수는 남긴다(그건 답의 일부다). */
/* 답 카드 맨 아래 '용신 … 기준' 한 줄도 위 배지와 같은 말이다 */
html.v181 .lightVerdictCaption{ display:none !important }

/* ── 옛 골드 톤을 걷는다 (2026-08-03, 사용자 지적: 잠깐 황토색 점수가 스친다) ──
   css/11(v1.33 시안)이 등급별로 그린·골드·레드를 칠한다. 그 골드(#b98614 · #ecb958)가
   결과가 그려지는 사이 잠깐 드러났다. 통일안은 보라 한 갈래라 여기서 덮는다.
   ★ 등급 자체는 배지 글자로 이미 읽힌다 — 색까지 셋으로 갈릴 이유가 없다. */
html.v181 .lightDecisionCard.lv-good,
html.v181 .lightDecisionCard.lv-mid,
html.v181 .lightDecisionCard.lv-bad{
  background:var(--v181-surface) !important; border-color:var(--v181-line) !important;
}
html.v181 .lightDecisionCard.lv-good:before,
html.v181 .lightDecisionCard.lv-mid:before,
html.v181 .lightDecisionCard.lv-bad:before{ display:none !important }
html.v181 .lightDecisionCard .lightVerdictScore b{ color:var(--v181-body) !important }
html.v181 .lightDecisionCard .lightVerdictBadge{
  background:rgba(145,132,217,.14) !important; border-color:rgba(145,132,217,.34) !important;
  color:var(--v181-badge-ink) !important;
}

/* 위로 뽑아 올린 '해볼 일'은 아래 원본에서 감춘다 (2026-08-03).
   실측에서 같은 문장 세 개가 wzyAiPanel 과 v181Steps 에 그대로 겹쳤다. */
html.v181 [data-v181-dup="1"]{ display:none !important }

/* 지지 옆 양력 날짜 (2026-08-03) — 본문보다 한 톤 낮춰 읽는 흐름을 끊지 않는다 */
html.v181 .v181When{ margin-left:3px; font-size:.88em; color:var(--v181-muted); font-weight:600 }

/* 주제 후보 칩 (2026-08-03) — 질문 아래, 괘 뽑기 위.
   고를 것이 둘 이상일 때만 나타나므로 평소에는 화면을 늘리지 않는다.
   ★ 「누구를 보나요」·「말투」와 **같은 구조**로 세운다 (2026-08-28 사용자 지적:
     "모바일에서 이 부분도 구려"). 전에는 이 줄만 가운데 정렬이라, 왼쪽 정렬한 아래
     두 줄과 축이 어긋나 설정 묶음이 흐트러져 보였다. 라벨 폭도 같은 5.4em 이라
     세 줄의 알약이 같은 x 에서 시작한다. */
html.v181 #v181Topics{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:10px 0 0; text-align:left;
}
html.v181 .v181TopicsQ{
  flex:0 0 auto; min-width:5.4em; margin:0; font-size:12.5px; font-weight:500;
  color:var(--v181-muted);
}
html.v181 .v181TopicsIn{ display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-start }
/* ★ 알약 규격은 세 줄이 같다: 34px · 12.5px · 700 · 알약. 켜짐은 채우지 않고 틴트다
   (솔리드 브랜드색은 이 카드의 주 CTA 와 겨룬다, DESIGN 액센트 규율).
   ★ 요약 줄(.v181Topic 이 아닌 바깥 쓰임)과 클래스 이름이 겹쳐, 이 규칙은 반드시
     #v181Topics 안으로 한정한다. 안 그러면 요약 바의 모양까지 바뀐다. */
html.v181 #v181Topics .v181Topic{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:34px; height:34px; padding:0 13px;
  border-radius:999px; border:1px solid rgba(145,132,217,.45);
  background:transparent; color:var(--v181-body);
  font-size:12.5px; font-weight:600; line-height:1; cursor:pointer;
  transition:background-color .16s ease, border-color .16s ease;
}
/* 닿는 자리 44px — 위아래로만 넓힌다(옆 알약을 덮지 않게) */
html.v181 #v181Topics .v181Topic::after{
  content:''; position:absolute; left:0; right:0; top:50%;
  height:44px; transform:translateY(-50%);
}
html.v181 #v181Topics .v181Topic.is-on{
  background:rgba(145,132,217,.16); border-color:rgba(145,132,217,.85); color:inherit;
}
body.dark-mode html.v181 #v181Topics .v181Topic,
html.v181 body.dark-mode #v181Topics .v181Topic{ color:#c9c4e0 }

/* ── 시안 규격을 옮긴다 (2026-08-04) ──────────────────────────────────────
   간격은 네 단만 쓴다. 요소마다 margin 을 주면 붙었다 떨어졌다 하므로 gap 으로만 벌린다. */
html.v181{ --s1:6px; --s2:10px; --s3:16px; --s4:24px }

/* AI 본문 — 절 제목과 문단, 항목 목록 */
html.v181 #wzyAiPanel .wzy-ai-body{ display:flex; flex-direction:column; gap:var(--s3) }
/* 제목 여백은 0 — 사이는 묶음(.wzy-grp)의 gap 이 맡는다 (2026-08-04 오토레이아웃).
   margin 과 gap 을 함께 쓰면 두 번 벌어진다(실측: 제목 아래가 20px 이었다). */
html.v181 #wzyAiPanel .wzy-ai-body h4{
  /* 12.5/700, 자간 .04em (2026-09-07, v0.5.0): 한글 구획 이름표에 라틴 자간(.1em)을 걸지 않는다(DESIGN §3).
     본문이 15px 로 오르면서 13/800 이던 제목이 본문과 겨루어 층이 흐렸다. */
  margin:0 !important; font-size:13.5px !important; font-weight:700 !important;
  letter-spacing:.04em; color:var(--v181-faint) !important;
}
/* 절 하나 = 제목 + 내용. 줄이 여럿이면 10px, 문단 하나뿐이면 6px 로 제목과 붙인다. */
html.v181 #wzyAiPanel .wzy-grp{ display:flex; flex-direction:column; gap:var(--s2) }
html.v181 #wzyAiPanel .wzy-grp.is-one{ gap:var(--s1) }
html.v181 #wzyAiPanel .wzy-grp p + p{ margin-top:var(--s2) !important }
/* 풀이 전체 — 본문·꼬리말·평가를 화면 단위(24px)로 벌린다 */
html.v181 #wzyAiPanel .wzy-ai-out{ display:flex; flex-direction:column; gap:var(--s4) }
html.v181 #wzyAiPanel .wzy-ai-foot{ margin:0 !important }
html.v181 #wzyAiPanel .wzy-ai-body p{ margin:0 !important; line-height:1.7 }
/* 항목 목록 — '- ' 로 오던 줄. 글머리는 점 하나로 그린다 */
html.v181 .wzy-ai-list{ list-style:none; margin:0 !important; padding:0 !important;
  display:flex; flex-direction:column }
/* 줄마다 아래에 가는 선 — 시안의 흐름 줄과 같은 꼴. 마지막 줄은 뺀다. */
html.v181 .wzy-ai-list li{
  position:relative; padding:9px 0 9px 17px; font-size:14.5px; line-height:1.6;
  color:var(--v181-body); border-bottom:1px solid var(--v181-line);
}
html.v181 .wzy-ai-list li:first-child{ padding-top:0 }
html.v181 .wzy-ai-list li:last-child{ border-bottom:0; padding-bottom:0 }
html.v181 .wzy-ai-list li::before{
  content:''; position:absolute; left:0; top:16px; width:7px; height:7px; border-radius:50%;
  background:#6d5ae6;
}
html.v181 .wzy-ai-list li:first-child::before{ top:7px }

/* ══ 시안과 어긋난 곳을 맞춘다 (2026-08-04, 실측 대조) ═══════════════════
   폭·마크·눈썹·주 단추는 이미 같았다. 아래 셋이 달랐다. */

/* ① 제목 자간 — 시안은 .04em 인데 normal 이었다. 이름을 조금 벌려야 눈썹과 결이 맞는다 */
html.v181 .wzyHeroInner .brand h1,
html.v181 #appTitle{ letter-spacing:.04em !important }

/* ② 질문 칸 — 시안은 radius 12 · 글자 13.5. 18/15 는 다른 칸보다 둥글고 커서 혼자 튀었다 */
/* ── 질문 칸 — 종이 (2026-08-04, A 시안으로 교체) ──────────────────────
   줄이 그어진 C 안을 걷고 밑줄 하나만 남긴다. 보관 키 칸이 이미 밑줄 하나라
   같은 결이고, 줄 무늬가 없어 다른 화면과도 어긋나지 않는다.
   ★ 핵심은 글자 크기다. 13.5px 이면 본문과 같아 '쓰는 자리'로 안 읽힌다 — 16px 로 세운다. */
html.v181 #title{
  border:0 !important; border-radius:0 !important;
  border-bottom:1.5px solid var(--v181-line) !important;
  background:none !important; background-image:none !important;
  box-shadow:none !important;
  padding:2px 2px 12px !important;
  font-size:16px !important; font-weight:500 !important; line-height:1.75 !important;
  color:var(--v181-ink) !important;
  min-height:104px; resize:none;
}
html.v181 #title:focus{
  outline:0; border-bottom-color:#6d5ae6 !important;
}
/* 예시 글 — 한 단 더 연하게. 쓰라는 안내이지 읽으라는 글이 아니다.
   누르는 순간 걷는 것은 js/19 가 맡는다(CSS 로는 다른 규칙에 밀렸다). */
html.v181 #title::placeholder{
  color:rgba(145,132,217,.55) !important; font-weight:400 !important;
}
html.v181 body.dark-mode #title::placeholder{ color:rgba(160,146,230,.45) !important }

/* ③ 세로 간격 — 여기가 '시안 같지 않다'의 실체였다.
   시안은 묶음마다 gap 으로 벌리는데, 앱 마크업은 요소마다 margin 을 갖고 있어
   리듬이 제각각이었다. 첫 화면 묶음을 flex 로 세우고 margin 을 걷는다.
   ★ 요소를 옮기지 않는다 — 순서는 그대로 두고 간격만 gap 이 만들게 한다. */
html.v181 #mode-random{
  display:flex !important; flex-direction:column !important; gap:16px !important;
}
html.v181 #mode-random > *{ margin-top:0 !important; margin-bottom:0 !important }
html.v181 .questionSetupGrid{
  display:flex !important; flex-direction:column !important; gap:6px !important;
}
html.v181 .questionSetupGrid > *{ margin:0 !important }
/* ★ 「누구를 보나요」와 「말투」 사이만 벌린다 (2026-08-28 실측).
   격자가 모든 줄을 6px 로 묶는데, 두 줄 다 닿는 자리를 44px 로 넓혀 둔 알약이라
   중심 거리가 44px 밑이면 위엣것의 아래쪽이 아래것에 잡아먹힌다(실측 4/5 로 떨어졌다).
   6+10=16px 이면 중심 거리가 50px 이라 둘 다 온전하다. 갈래가 다른 설정이기도 하다. */
html.v181 .questionSetupGrid > .v181Fact{ margin-top:10px !important }
/* 히어로 — 마크·눈썹·이름·약속은 한 묶음이라 6px */
html.v181 .wzyHeroInner{
  display:flex !important; flex-direction:column !important; align-items:center !important;
  gap:6px !important;
}
/* 여백은 요소마다 다르다 (타로 실측) — 통째로 0 으로 만들지 않는다 */
html.v181 .wzyHeroInner .brand{ margin:0 !important }
html.v181 .wzyHeroInner .brand h1,
html.v181 #appTitle{
  font-size:34px !important; font-weight:700 !important;
  letter-spacing:normal !important; line-height:normal !important;
  color:var(--v181-ink,#292b31) !important; margin:0 0 8px !important;   /* 14→8 (2026-09-08 v0.7.2) */
}
/* '괘로 오늘의 질문에 답합니다' — 아래 설명이 같은 말을 더 자세히 한다. 한 번만. */
html.v181 .wzyHeroInner .brand p{ display:none !important }
html.v181 .wzyIntro{
  margin:0 4px 0 !important; font-size:14px !important; font-weight:400 !important;   /* 아래 8→0: 세부 줄을 걷어 바로 카드가 온다 (2026-09-08) */
  line-height:1.75 !important; letter-spacing:-.01em !important;
  color:var(--v181-muted-strong,#3f424d) !important;
}
html.v181 .wzyIntro p{ margin:0 !important; font-size:inherit !important;
  line-height:inherit !important; color:inherit !important }
/* 세부 두 줄(.wzyFine)은 2026-09-08 에 걷었다 — 규칙도 함께 */

/* ── 첫 화면이 밀려 보이던 것 (2026-08-04, 사용자 지적) ────────────────────
   마크(䷀)와 주제 칩은 js/19 가 나중에 만든다. 그 순간 위아래가 밀리면서
   '다른 화면이 나왔다가 바뀌는' 것처럼 보였다.
   ★ 마크는 CSS 로 그린다 — 첫 페인트부터 자리가 있어 밀릴 일이 없다.
     js 가 만든 .wzyMark 는 그때 숨긴다(둘이 겹치지 않게).
   ★ 칩 자리는 미리 높이를 잡아 둔다. 글이 없어도 자리는 있어야 아래가 안 뛴다. */
html.v181 #mode-random{ min-height:1px }
html.v181 #v181Topics{ min-height:62px }

/* ══ 결과 화면(#lightSummaryPanel)을 시안 규격으로 ═══════════════════════
   2026-08-04. 여태 시안을 AI 패널(#wzyAiPanel)에만 입혔는데, 화면에 늘 보이는
   것은 앱이 직접 그리는 이쪽이었다(AI 패널은 응답이 왔을 때만 얹힌다).

   실측한 어긋남 —
     판정  12px pill  →  시안은 22px/800 큰 글씨 (키컬러 하나, 등급으로 색을 나누지 않는다)
     점수  22px 숫자  →  시안은 11.5px/700 흐리게, 오른쪽 끝
     이유  13px/600   →  13px/400
     절 제목 12px/800 진하게 → 11.5px/800 자간 .1em 흐리게
     항목  12.5px 맨줄 → 13.5px + 점 7px + 1px 구분선
   판정과 점수가 서로 바뀌어 있었다 — 답이 작고 숫자가 컸다.

   ★ 간격은 요소마다 주지 않는다. 묶음마다 gap 으로만 (6/10/16/24). */
html.v181 .lightUserReport{
  display:flex !important; flex-direction:column; gap:var(--s3);
}
html.v181 .lightUserReport > *{ margin:0 !important }

/* 답 카드 — 옅은 면 · radius 16 · 여백 16 · 안쪽 6 */
html.v181 .lightDecisionCard{
  display:flex !important; flex-direction:column; gap:var(--s1);
  padding:var(--s3) !important; border-radius:16px !important;
  background:var(--v181-surface) !important;
  border:1px solid var(--v181-line) !important;
}
html.v181 .lightVerdictHead{
  display:flex !important; align-items:center; gap:var(--s1); margin:0 !important;
}
/* 판정 — 알약을 걷고 큰 글씨로 세운다. 이 화면에서 가장 먼저 읽혀야 하는 자리다. */
html.v181 .lightDecisionCard .lightVerdictBadge{
  background:none !important; border:0 !important; padding:0 !important;
  font-size:22px !important; font-weight:800 !important;
  letter-spacing:-.02em !important; line-height:1.25 !important;
  color:#6d5ae6 !important;
}
/* 점수 — 오른쪽 끝에 조용히. 답을 가리지 않는다. */
html.v181 .lightDecisionCard .lightVerdictScore{
  margin-left:auto !important; font-size:11.5px !important; font-weight:700 !important;
  color:var(--v181-muted) !important; font-variant-numeric:tabular-nums;
}
html.v181 .lightDecisionCard .lightVerdictScore b{
  font-size:11.5px !important; font-weight:700 !important;
  letter-spacing:normal !important; color:inherit !important;
}
html.v181 .lightDecisionCard .lightDecisionTitle{ margin:2px 0 0 !important }
html.v181 .lightDecisionCard .lightDecisionText{
  font-weight:400 !important; margin:0 !important;
}

/* 절 — 카드 면을 걷고 제목 + 내용 한 묶음으로 (시안의 .grp) */
html.v181 .lightPathCard,
html.v181 .lightActionCard{
  display:flex !important; flex-direction:column; gap:var(--s2);
  padding:0 !important; border:0 !important; background:none !important;
  box-shadow:none !important; border-radius:0 !important;
}
html.v181 .lightPathCard > b,
html.v181 .lightActionCard > b{
  margin:0 !important; font-size:11.5px !important; font-weight:800 !important;
  letter-spacing:.1em !important; color:var(--v181-faint) !important;
}
/* 항목 — 점 7px 과 가는 선으로 끊어 읽힌다 (시안의 흐름 줄) */
html.v181 .lightPathCard ul,
html.v181 .lightActionCard ul{
  list-style:none !important; margin:0 !important; padding:0 !important;
  display:flex; flex-direction:column;
}
html.v181 .lightPathCard li,
html.v181 .lightActionCard li{
  position:relative; margin:0 !important; padding:9px 0 9px 17px !important;
  font-size:13.5px !important; line-height:1.55 !important;
  color:var(--v181-body) !important;
  border-bottom:1px solid var(--v181-line);
}
html.v181 .lightPathCard li:first-child,
html.v181 .lightActionCard li:first-child{ padding-top:0 !important }
html.v181 .lightPathCard li:last-child,
html.v181 .lightActionCard li:last-child{ border-bottom:0; padding-bottom:0 !important }
html.v181 .lightPathCard li::before,
html.v181 .lightActionCard li::before{
  content:''; position:absolute; left:0; top:16px;
  width:7px; height:7px; border-radius:50%; background:#6d5ae6;
}
html.v181 .lightPathCard li:first-child::before,
html.v181 .lightActionCard li:first-child::before{ top:7px }
/* 문단으로 오는 절(피할 것 등) */
html.v181 .lightPathCard p,
html.v181 .lightActionCard p{
  margin:0 !important; font-size:13.5px !important; line-height:1.6 !important;
  color:var(--v181-body) !important;
}
/* '지금 할 일 / 확인할 것 / 피할 것' 셋을 담는 격자 — gap 이 0 이라 셋이 붙어 있었다.
   묶음끼리 간격(16)으로 벌린다. */
html.v181 .lightActionGrid{
  display:flex !important; flex-direction:column; gap:var(--s3) !important;
  margin:0 !important; padding:0 !important; border:0 !important; background:none !important;
}
html.v181 .lightPathCard .v151SituationTitle{
  margin:0 !important; font-size:11.5px !important; font-weight:800 !important;
  letter-spacing:.1em !important; color:var(--v181-faint) !important;
}

/* ══ 흐름 · 시기 · 짚이는 자리 (2026-08-04, 시안 규격) ═══════════════════
   Worker 가 '앞칸｜본문' 으로 보낸 줄만 이 모양이 된다. 구분자가 없으면 옛 모양이다. */

/* 흐름 — 점(결) + 본문 + 꼬리표(무엇). 본문이 남은 폭을 갖고 꼬리표는 제 크기만 쓴다. */
html.v181 .wzy-flow{ display:flex; flex-direction:column }
html.v181 .wzy-fl{
  display:flex; gap:var(--s2); align-items:flex-start;
  padding:9px 0; border-bottom:1px solid var(--v181-line);
  font-size:14px; line-height:1.6; color:var(--v181-body);   /* 꼬리표가 붙는 줄이라 본문(15)보다 한 단 작게 (2026-09-07) */
}
html.v181 .wzy-fl:first-child{ padding-top:0 }
html.v181 .wzy-fl:last-child{ border-bottom:0; padding-bottom:0 }
html.v181 .wzy-dot{
  flex:0 0 7px; width:7px; height:7px; border-radius:50%; margin-top:7px;
  background:#6d5ae6;
}
html.v181 .wzy-fl:first-child .wzy-dot{ margin-top:6px }
html.v181 .wzy-dot.g{ background:#2f7fc0 }
html.v181 .wzy-dot.y{ background:#c98a1a }
html.v181 .wzy-dot.r{ background:#c2566e }
html.v181 .wzy-fl-t{ flex:1; min-width:0 }
/* 꼬리표는 줄바꿈하지 않는다 — 본문만 접히고 꼬리표는 오른쪽에 붙어 있다 */
/* 앞칸을 같은 너비로 (2026-08-05, 사용자 지시) — '일'은 한 글자, '구조'는 두 글자라
   상자 폭이 달라 오른쪽 끝이 들쭉날쭉했다. 두 글자에 맞춰 바닥을 깔고 글자는 가운데 둔다. */
html.v181 .wzy-fl-k{
  flex:0 0 auto; margin-top:2px; padding:1px 6px; white-space:nowrap;
  min-width:44px; text-align:center;
  font-size:12px; font-weight:800; color:var(--v181-faint);
  border:1px solid var(--v181-line); border-radius:5px;
}

/* 시기 — 번호 원 + 날짜 + 까닭. 카드 하나에 담는다. */
html.v181 .wzy-when{
  display:flex; flex-direction:column; gap:var(--s1);
  padding:13px 14px; border-radius:12px;
  border:1px solid var(--v181-line); background:var(--v181-card,#fff);
}
/* 까닭을 날짜 아래로 (2026-08-04, 사용자 지적: 글이 잘린다).
   시안은 까닭을 오른쪽 한 줄(190px)에 두고 '열여덟 자 안팎'을 전제했는데,
   실제로 오는 문장은 그 두 배다("비어 있던 직장의 기운이 채워지며…" 33자).
   잘라내면 왜 그때인지가 사라진다 — 줄을 내주고 다 보이게 한다.
   번호 원은 왼쪽 칸에 그대로 두어 세로 리듬은 지킨다. */
html.v181 .wzy-wl{
  display:grid; grid-template-columns:17px 1fr; gap:3px var(--s2);
  align-items:start; font-size:13.5px;
}
html.v181 .wzy-wn{
  grid-column:1; grid-row:1; width:17px; height:17px; margin-top:2px; border-radius:50%;
  display:grid; place-items:center; font-size:10.5px; font-weight:800;
  /* 숫자 색을 한 단 내렸다 (2026-08-14 검수) — 제 연보라 면 위에서 4.21 이었다. --v181-lead 는 5.70 이고
     다크에서는 밝은 쪽(#b5a8f2)으로 뒤집혀 있어 두 테마 모두 맞는다. */
  background:rgba(109,90,230,.12); color:var(--v181-lead);
}
html.v181 .wzy-wd{
  grid-column:2; grid-row:1; min-width:0;
  font-weight:700; line-height:1.45; color:var(--v181-ink);
}
html.v181 .wzy-wm{
  grid-column:2; grid-row:2; min-width:0; max-width:none;
  font-size:11.5px; line-height:1.5; text-align:left; color:var(--v181-muted);
  white-space:normal; overflow:visible;
}

/* 짚이는 자리 — 라벨 폭을 고정한다. auto 로 두면 이름 길이에 따라 본문 시작점이 줄마다 튄다. */
/* 짚이는 자리 — 라벨을 본문 위로 (2026-08-04, 사용자 지적: 배치가 불안해 보인다).
   시안은 라벨을 왼쪽에 74px 로 세웠는데, 폰 폭에서는 본문에 남는 자리가 좁아
   설명이 네댓 줄로 흐르고 라벨만 위에 덩그러니 떠 보였다.
   라벨을 이름표처럼 위에 얹고 본문이 폭을 다 쓰게 하면 줄 수가 줄고 덩어리가 안정된다. */
html.v181 .wzy-seats{ display:flex; flex-direction:column; gap:var(--s3) }
html.v181 .wzy-seat{
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--s1);
  font-size:13.5px; line-height:1.6; color:var(--v181-body);
}
html.v181 .wzy-sn{
  align-self:flex-start; padding:3px 9px; border-radius:6px;
  white-space:nowrap; font-size:11px; font-weight:800;
  background:rgba(109,90,230,.10); color:#6d5ae6;
}
html.v181 .wzy-st{ width:100% }

/* 새로 작괘의 평가 문지기를 걷었다 (2026-09-22 사용자 요청). 2026-08-04 에는 평가를 남긴 뒤에야
   내놓았는데, 평가가 맨 아래의 선택이 되면서 막을 까닭이 없어졌다. 늘 보인다. */

/* hidden 이 안 먹던 것 (2026-08-04 실측: 보관 키가 hidden 인데도 높이 160 으로 보였다).
   평가 흐름의 두 칸은 display 를 주는 규칙들 뒤에 실려 그것들이 이겼다.
   '숨기라는 표시'는 무엇보다 세야 한다 — 여기서 못박는다. */
html.v181 .wzy-review[hidden],
html.v181 .wzy-key[hidden],
html.v181 .wzy-review[hidden],
html.v181 .wzy-key[hidden]{ display:none !important }

/* 꼬리말 — 가운데로 */
html.v181 .wzyFootNote{ text-align:center !important }



/* ══ 시안 배치로 맞춘다 (2026-08-04, 실측 대조) ═════════════════════════
   시안 순서: 주제 배지 → 질문 → 괘 그림 → 답 카드
   실제 순서: 질문 → 답 카드 → 접힘 → 괘 그림   ← 괘가 답 아래로 밀려 있었다.
   #resultPanel 은 flex 라 order 로 자리를 정한다. 질문(-70)과 답(-60) 사이에 넣는다. */
html.v181 #resultPanel .wzyGuaPair{ order:-65 !important }

/* 괘 그림 — 시안의 .gua 규격. 옅은 면 한 칸에 '지금 → 가는 쪽'을 나란히. */
/* 두 괘의 **상효(맨 윗줄)** 를 같은 높이에 세운다 (2026-08-04, 사용자 지시).
   가운데 정렬이면 동효 범례가 붙은 쪽만 그림이 내려앉아 윗줄이 어긋난다. */
html.v181 .wzyGuaPair{
  display:flex !important; align-items:flex-start; justify-content:center; gap:var(--s3) !important;
  padding:var(--s3) !important; margin:0 !important;
  border:1px solid var(--v181-line) !important; border-radius:16px !important;
  background:var(--v181-surface) !important;
}
html.v181 .wzyGuaPair .wzyGua{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  margin:0 !important; padding:0 !important; border:0 !important; background:none !important;
}
/* 라벨(지금 · 가는 쪽)은 이름 아래로 — 시안은 그림 → 이름 → 라벨 차례다 */
html.v181 .wzyGuaPair .wzyRcRole{
  order:3; margin:0 !important; font-size:12px !important; font-weight:400 !important;
  color:var(--v181-faint) !important; letter-spacing:0 !important;
}
html.v181 .wzyGuaPair .wzyLines{ order:1; margin:0 !important }
html.v181 .wzyGuaPair .wzyCap{
  order:2; margin:0 !important; font-size:13.5px !important; font-weight:800 !important;
  color:var(--v181-lead) !important;
}
/* 이름도 획과 같은 차례 — 지괘가 진하고 본괘가 한 단 물러난다 */
html.v181 .wzyGuaPair .wzyGua.alt .wzyCap{ color:var(--v181-ink) !important }
html.v181 .wzyGuaPair .wzyArrow{
  align-self:center; margin:0 !important; font-size:16px !important;
  color:var(--v181-faint) !important;
}
/* 동효 범례는 맨 아래로 — order 를 안 주면 0 이라 그림보다 위로 올라간다(그게 어긋남의 원인이었다).
   범례가 있는 괘와 없는 괘의 높이가 달라도 윗줄은 flex-start 가 맞춰 준다. */
html.v181 .wzyGuaPair .wzyLegend{
  order:4; margin:0 !important; font-size:10.5px !important;
  color:var(--v181-faint) !important;
}

/* 주제 배지 — 시안은 '만남·약속 · 바꾸기' 알약 하나.
   '우주 육효 · 작괘 결과'는 상단 바가 이미 말하고 있어 겹친다. 걷는다. */
html.v181 .v181Brow{
  display:flex !important; justify-content:flex-start !important;
  border:0 !important; padding:0 !important; margin:0 !important; background:none !important;
}
html.v181 .v181Brow .l{ display:none !important }
html.v181 .v181Brow .r{
  padding:5px 10px !important; border-radius:999px !important;
  background:rgba(109,90,230,.10) !important; color:#6d5ae6 !important;
  font-size:11.5px !important; font-weight:700 !important; cursor:pointer;
}
html.v181 .v181Brow .r::after{ content:' · 바꾸기'; opacity:.72 }
html.v181 .v181Brow .r:hover{ background:rgba(109,90,230,.18) !important }

/* 해볼 일 — 시안의 번호 원(19px 면 accent, 흰 숫자 11px/800) */
html.v181 #wzyAiPanel .wzy-steps{ display:flex; flex-direction:column; gap:var(--s1) }
html.v181 #wzyAiPanel .wzy-step{
  display:flex; gap:var(--s2); align-items:flex-start;
  font-size:14.5px; line-height:1.6; color:var(--v181-body);   /* 목록 줄과 같은 단 (2026-09-07, v0.5.0) */
}
/* 때가 붙은 줄은 세 칸으로 나눈다 — 번호 · 때 · 할 일 (2026-08-04, 사용자 제안).
   격자로 두면 줄이 여럿이어도 때 칸의 폭이 가장 긴 것에 함께 맞춰져 열이 선다.
   때는 줄바꿈하지 않는다 — '8월 15일 전까지'가 두 줄로 갈리면 열이 흐트러진다. */
html.v181 #wzyAiPanel .wzy-steps:has(.has-when){
  display:grid; grid-template-columns:auto auto 1fr; gap:var(--s2) var(--s2);
  align-items:baseline;
}
html.v181 #wzyAiPanel .wzy-steps:has(.has-when) .wzy-step{ display:contents }
html.v181 .wzy-swhen{
  /* 때 칸의 폭은 가장 긴 것에 맞춰진다(격자 auto). 짧은 칩이 왼쪽에 붙으면 들쭉날쭉해 보이므로
     칸을 채우고 글자를 가운데 둔다 (2026-08-04, 사용자 지시) — 칩 크기가 같아져 열이 반듯하다. */
  justify-self:stretch; text-align:center;
  white-space:nowrap; align-self:start; margin-top:1px;
  padding:2px 9px; border-radius:6px;
  background:rgba(109,90,230,.10); color:#4a3fb5;
  font-size:12px; font-weight:800; letter-spacing:-.01em;
}
html.v181 body.dark-mode .wzy-swhen{
  background:rgba(160,146,230,.16); color:var(--v181-lead);
}
html.v181 .wzy-stodo{ min-width:0 }
/* :has 를 못 읽는 브라우저에서는 지금까지처럼 한 줄로 흐른다 — 때 칩만 그대로 보인다 */
html.v181 #wzyAiPanel .wzy-sno{
  /* ★ 폭을 값으로 못박는다 (2026-08-04, 사용자 지적: 숫자가 눌려 타원이 됐다).
     해볼 일이 격자로 바뀌면서 flex 값이 더는 쓰이지 않아 폭이 글자 크기로 줄었다.
     세로만 19px 로 남아 동그라미가 눌린 것이다. */
  flex:0 0 20px; width:20px; height:20px; margin-top:1px; border-radius:50%;
  display:grid; place-items:center; font-size:12px; font-weight:800;
  background:#6d5ae6; color:#fff;
}

/* 평가 남기기 단추 — 주변 톤에 맞춘다 (2026-08-04, 사용자 지시).
   진한 보라 면이라 조용한 평가 자리에서 혼자 튀었다.
   시안 원칙: 면으로 칠한 단추는 화면에 하나(첫 화면의 '괘 뽑기')다.
   여기는 읽고 난 뒤의 보조 걸음이므로 테두리 단추로 낮추고, 폭도 글자에 맞춰 가운데 세운다. */
/* ══ 리뷰 남기기 — 칸과 단추를 한 덩어리로 (2026-08-05, 사용자 지시) ══════
   전에는 테두리 두른 큰 칸 아래에 테두리 두른 단추가 따로 떠 있어 선이 두 겹이었다.
   질문 칸에서 쓴 방식(줄 하나만 긋는 종이)과 같은 결로 맞춘다 —
   상자를 하나만 두고 그 안에 글과 단추를 담으면 선이 하나로 준다. */
html.v181 .wzy-review{
  display:flex !important; flex-direction:column; gap:0;
  /* ★ 폭을 못박는다 (2026-09-10). 감싸는 .wzy-rate 가 세로 flex 에 align-items:center 라,
     폭을 안 정한 자식은 글 길이만큼만 자란다. 384px 카드 안에서 칸이 222px 이었다. */
  width:100% !important; align-self:stretch !important;
  align-items:stretch; margin-top:var(--s2);
  border:1px solid var(--v181-line); border-radius:14px; overflow:hidden;
  background:var(--v181-card,#fff);
}
html.v181 .wzy-review:focus-within{ border-color:rgba(109,90,230,.55) }
/* ★ 16px 이다 (2026-09-10). 13.5px 이던 자리인데, 입력칸이 16px 아래면 아이폰 사파리가
   초점을 받을 때 화면을 통째로 확대한다(DESIGN.md 입력칸 규칙). 두 줄짜리 칸도 좁았다.
   네 줄쯤(108px) 열어 두고 여덟 줄(190px)에서 멈춘다. */
html.v181 .wzy-review-t{
  width:100%; min-height:108px !important; max-height:190px;
  padding:13px 14px 6px !important;
  border:0 !important; border-radius:0 !important; background:none !important;
  box-shadow:none !important;
  font-size:16px !important; line-height:1.6 !important;
  resize:none !important; overflow-y:auto; text-align:left !important;
}
/* 리뷰 남기기 — 별을 고른 뒤에만 보이는 조용한 선택지다.
   주 단추처럼 칠하면 '이것까지 해야 끝난다'로 읽혀 도로 막아 세우는 자리가 된다. */
html.v181 .wzy-review-open{
  width:auto !important; min-height:38px !important;
  margin:10px auto 0 !important; padding:9px 16px !important;
  border:1px solid var(--v181-line) !important; border-radius:999px !important;
  background:none !important; box-shadow:none !important;
  color:var(--v181-lead) !important; font-size:13.5px !important; font-weight:700 !important;
}
html.v181 .wzy-review-open:hover{ background:rgba(109,90,230,.06) !important; filter:none !important }
html.v181 .wzy-rate-ok{
  display:block; margin-top:4px; font-size:13px; color:var(--v181-faint);
}
html.v181 .wzy-rate-ok[hidden], html.v181 .wzy-review-open[hidden]{ display:none !important }
html.v181 .wzy-review-t:focus{ outline:0 !important }
html.v181 .wzy-review-t::placeholder{ color:var(--v181-faint) }
/* 리뷰 닉네임 (2026-09-11) — 상자 하나, 선 하나(위 2026-08-05 원칙). 테두리를 두른 칸이 상자 안에
   또 들어가면 선이 두 겹이 된다. 테두리 없이 상자 맨 위 한 줄로 두고 아래에 가는 줄 하나만 긋는다.
   글자는 16px 이다(아이폰 사파리 확대 방지, DESIGN.md 입력칸 규칙). */
html.v181 .wzy-review-nick{
  width:100%; min-height:44px !important; margin:0 !important;
  padding:12px 14px 10px !important;
  border:0 !important; border-bottom:1px solid var(--v181-line) !important; border-radius:0 !important;
  background:none !important; box-shadow:none !important;
  font-size:16px !important; line-height:1.4 !important; color:var(--v181-ink) !important;
}
html.v181 .wzy-review-nick:focus{ outline:0 !important }
html.v181 .wzy-review-nick::placeholder{ color:var(--v181-faint) }
/* 단추는 상자 안 오른쪽 아래에 조용히 — 면도 테두리도 없이 글자만 둔다 */
html.v181 .wzy-review-go{
  width:auto !important; min-height:36px !important;
  padding:6px 14px 12px !important; margin:0 4px 0 auto !important;
  border:0 !important; border-radius:0 !important;
  background:none !important; box-shadow:none !important;
  color:#6d5ae6 !important; font-size:14px !important; font-weight:800 !important;
}
html.v181 .wzy-review-go:hover{ color:#4a3fb5 !important; filter:none !important }
html.v181 body.dark-mode .wzy-review{ background:var(--v181-card) }
html.v181 body.dark-mode .wzy-review-go{ color:var(--v181-lead) !important }

/* ══ 생활 세부 운세 카드 (2026-08-04, 시안 톤으로) ═══════════════════════
   카드마다 분홍·노랑·초록으로 갈려 있어 여섯 장이 서로 다른 색 덩어리로 보였다.
   시안 원칙 그대로 — 등급으로 색을 나누지 않는다. 좋고 나쁨은 오른쪽 꼬리표와
   본문이 이미 말한다. 면은 하나로 통일하고 꼬리표만 남긴다. */
html.v181 .lightFortuneWrap{ margin:0 !important; padding:0 !important }
html.v181 .todayFortuneGrid{
  display:flex !important; flex-direction:column; gap:var(--s2) !important;
  margin:0 !important; padding:0 !important;
}
html.v181 .todayFortuneCard,
html.v181 .todayFortuneCard.good,
html.v181 .todayFortuneCard.caution,
html.v181 .todayFortuneCard.bad{
  display:flex; flex-direction:column; gap:var(--s1);
  margin:0 !important; padding:13px 14px !important; border-radius:12px !important;
  background:var(--v181-card,#fff) !important;
  border:1px solid var(--v181-line) !important;
  box-shadow:none !important;
}
html.v181 .todayFortuneCard::before,
html.v181 .todayFortuneCard::after{ display:none !important }
/* base 가 flex-direction:column 을 주고 있어 제목과 꼬리표가 세로로 쌓였다(실측).
   한 줄에 나란히 — 제목 왼쪽, 꼬리표 오른쪽 끝. */
html.v181 .todayFortuneHead{
  display:flex !important; flex-direction:row !important;
  align-items:center !important; justify-content:flex-start !important;
  gap:var(--s1); text-align:left !important;
  margin:0 !important; padding:0 !important; border:0 !important;
}
html.v181 .todayFortuneTitle{
  display:flex; align-items:center; gap:5px; margin:0 !important;
  font-size:13px !important; font-weight:800 !important; color:var(--v181-ink) !important;
}
html.v181 .todayFortuneTitle i{ font-style:normal; font-size:14px; line-height:1 }
/* 꼬리표 — 흐름 줄의 꼬리표와 같은 규격(10.5/800, 테두리 하나) */
html.v181 .todayFortunePill{
  margin-left:auto !important; padding:1px 7px !important; border-radius:5px !important;
  background:none !important; border:1px solid var(--v181-line) !important;
  color:var(--v181-faint) !important; font-size:10.5px !important; font-weight:800 !important;
  white-space:nowrap;
}
html.v181 .todayFortuneText{
  margin:0 !important; font-size:13.5px !important; line-height:1.6 !important;
  color:var(--v181-body) !important;
}

/* 접힘 바 — '생활 세부 운세 보기'와 같은 얼굴로 (2026-08-04, 사용자 지시).
   그쪽은 테두리 없이 제목(13/800)만 있고 오른쪽에 펼침 표시가 붙는데,
   이쪽만 흰 면에 테두리를 두른 칩이라 같은 성격의 것이 둘로 갈려 보였다.
   실측한 summary 규격: 여백 13/14 · 테두리 0 · 배경 없음 · 13px/800 · 색 #292b31. */
html.v181 .v181Bar{
  background:none !important; border:0 !important; border-radius:0 !important;
  box-shadow:none !important; padding:13px 14px !important;
  font-size:13px !important; font-weight:800 !important;
  color:var(--v181-ink) !important;
}
html.v181 .v181Bar:hover{ border:0 !important; color:#6d5ae6 !important }
/* 펼침 표시도 세부 운세 쪽과 같은 동그란 단추로 */
html.v181 .v181Bar::after{
  content:'+'; flex:0 0 26px; width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center; font-size:15px; font-weight:600;
  background:rgba(109,90,230,.10); color:#6d5ae6;
}
/* (걷어냄 880행) 열린 상태 기호 — 더하기표 하나로 통일했다. */

/* ══ 여섯 자리 풀이 (2026-08-04, 사용자 결정으로 이 판만 남음) ═══════════
   두 판을 견줘 본 뒤 PRO 로 정했다. 단추가 하나뿐이라 '어느 쪽을 크게'가 없어졌고,
   OLD 를 낮추던 규칙과 PRO 단추 모양도 함께 걷었다 —
   남는 단추는 6ix.html 의 인라인 스타일이 주 단추 모양을 준다. */

/* 여섯 자리를 카드로 (2026-08-04, 사용자 지시: 동양타로 리딩처럼).
   타로가 카드 한 장씩 넘기며 읽히듯, 육효는 자리 한 장씩 읽는다.
   ★ 일하는 자리(세효·응효·용신·동효·공망)는 카드로 세우고,
     조용한 자리는 카드 없이 한 줄로 흘린다 — 여섯이 다 카드면 무엇이 중요한지 사라진다. */
/* 요약 · 자세히 (2026-08-04, 사용자 제안) —
   요약: 표시가 붙은 자리만 카드로. 자세히: 여섯 자리를 같은 카드 크기로.
   표시 없는 자리는 '뜻이 조용하다'는 것뿐이라, 늘 보이면 카드 리듬이 끊긴다. */
/* 갈래 고르개 — 붙은 두 칸(세그먼트). 알약 둘이 떨어져 있으면 무엇과 무엇 중
   고르는 것인지 읽히지 않는다. 한 틀 안에서 고르는 모양으로 바꾼다. */
html.v181 .wzy-sixtab{
  display:inline-flex; gap:2px; margin-bottom:var(--s2);
  padding:3px; border-radius:10px; background:var(--v181-surface);
  border:1px solid var(--v181-line);
}
html.v181 .wzy-sixtab button{
  min-width:56px; min-height:30px; padding:0 14px; border:0; border-radius:8px;
  cursor:pointer; font-family:inherit; background:none;
  font-size:12px; font-weight:700; color:var(--v181-muted);
}
html.v181 .wzy-sixtab button.on{
  /* 켜진 쪽 글자는 랜딩 보라(#6d5ae6)가 아니라 --v181-lead (2026-09-07, v0.4.5 · Codex 점검 P1).
     다크 카드 위에서 3.33:1 이던 것이 7.7 이 된다. 라이트는 6.8. */
  background:var(--v181-card,#fff); color:var(--v181-lead);
  box-shadow:0 1px 2px rgba(60,50,110,.10);
}
html.v181 .wzy-six{ display:flex; flex-direction:column; gap:var(--s2) }
/* 요약 — 조용한 자리는 감춘다 */
html.v181 .wzy-sixwrap[data-mode="brief"] .wzy-six-r:not(.on){ display:none }
/* 자세히 — 여섯 모두 같은 카드로. 설명이 없어도 카드 크기를 지킨다. */
html.v181 .wzy-sixwrap[data-mode="full"] .wzy-six-r{
  display:grid; grid-template-columns:auto 1fr auto; gap:var(--s1) var(--s2);
  align-items:center; padding:var(--s3); border-radius:14px;
  border:1px solid var(--v181-line); background:var(--v181-card,#fff);
  font-size:13.5px; color:var(--v181-body);
}
html.v181 .wzy-sixwrap[data-mode="full"] .wzy-six-r:not(.on){ opacity:.72 }
html.v181 .wzy-sixwrap[data-mode="full"] .wzy-six-r .wzy-six-n{
  grid-column:1; grid-row:1; justify-self:start; padding:2px 8px; border-radius:6px;
  background:rgba(109,90,230,.10); color:#6d5ae6; font-size:12px; font-weight:800;
}
html.v181 .wzy-sixwrap[data-mode="full"] .wzy-six-r .wzy-six-k{
  grid-column:1 / -1; grid-row:2;
  font-size:15px; font-weight:800; color:var(--v181-ink); letter-spacing:-.01em;
}
/* 설명이 없는 자리에는 한 줄로 자리를 채운다 — 카드 높이가 들쭉날쭉하지 않게 */
/* 이제 여섯 자리 모두 설명이 온다 — 빈 자리를 채우던 대체 문구는 뺀다.
   설명이 없는 줄이 오더라도 카드는 두 줄로 서므로 무너지지 않는다. */
html.v181 .wzy-sixwrap[data-mode="full"] .wzy-six-r .wzy-six-b{
  grid-column:1 / -1; grid-row:3; margin:0 !important;
  font-size:13.5px; line-height:1.6; color:var(--v181-body);
}

/* 카드 — 일하는 자리 */
/* 자리 배지와 표시를 한 줄에 양끝으로 (2026-08-04, 사용자 지적: 줄 낭비).
   전에는 상효 / 관귀 미토 / 동효·용신 이 세 줄로 쌓여 카드 하나가 지나치게 길었다. */
html.v181 .wzy-six-r.on{
  display:grid; grid-template-columns:auto 1fr auto; gap:var(--s1) var(--s2);
  align-items:center;
  padding:var(--s3); border-radius:14px;
  border:1px solid var(--v181-line); background:var(--v181-card,#fff);
}
html.v181 .wzy-six-r.on .wzy-six-n{
  grid-column:1; grid-row:1; justify-self:start;
  padding:2px 8px; border-radius:6px;
  background:rgba(109,90,230,.10); color:var(--v181-lead);   /* 4.33 → 5.88 (2026-08-14 검수) */
  font-size:12px; font-weight:800; letter-spacing:.04em;
}
html.v181 .wzy-six-r.on .wzy-six-t{
  grid-column:3; grid-row:1; justify-self:end;
  padding:1px 7px; border-radius:5px;
  border:1px solid var(--v181-line); font-size:12px; font-weight:800;
  color:var(--v181-faint); white-space:nowrap;
}
html.v181 .wzy-six-r.on .wzy-six-k{
  grid-column:1 / -1; grid-row:2;
  font-size:15px; font-weight:800; color:var(--v181-ink); letter-spacing:-.01em;
}
html.v181 .wzy-six-r.on .wzy-six-b{
  grid-column:1 / -1; grid-row:3; margin:0 !important;
  font-size:13.5px; line-height:1.6; color:var(--v181-body);
}

/* 조용한 자리 — 카드로 세우지 않는다. 한 줄로 지나간다. */
html.v181 .wzy-six-r:not(.on){
  display:flex; align-items:baseline; gap:var(--s2);
  padding:4px 14px; font-size:12.5px; color:var(--v181-faint);
}
html.v181 .wzy-six-r:not(.on) .wzy-six-n{ flex:0 0 38px; font-size:12px; font-weight:700 }
html.v181 .wzy-six-r:not(.on) .wzy-six-k{ font-weight:600 }

/* ══ v2 배치 — 동양타로 리딩 순서로 (2026-08-04, 사용자 지시) ═══════════
   동양타로 실측: 질문 → 답 → 풀이 → **카드**. 카드가 맨 아래다.
   답을 먼저 주고 근거를 뒤에 붙이는 순서라, 읽는 사람이 결론부터 얻는다.
   v1 은 시안대로 괘 그림이 답 위에 있다 — 건드리지 않는다.

   ★ 중첩을 피한다: 괘 그림(두 괘의 전체 모양)과 여섯 자리(자리별 뜻)는 역할이 다르지만
     떨어져 있으면 같은 것을 두 번 보는 느낌이 든다. 괘 그림을 풀이 **바로 뒤**에 붙여
     '이 풀이가 나온 괘'로 읽히게 한다. */
/* 괘 그림은 상단에 (2026-08-04, 사용자 지시) — 무엇을 뽑았는지가 먼저다.
   v1 과 같은 자리(질문 -70 과 답 -60 사이)로 되돌린다. */
html.v181 body.wzy-v2 #resultPanel .wzyGuaPair{ order:-65 !important }
/* 괘 그림 위에 무엇인지 한 줄 — 타로의 카드 이름표(plate) 자리 */
html.v181 body.wzy-v2 #resultPanel .wzyGuaPair::before{
  content:'뽑은 괘'; position:absolute; top:-26px; left:2px;
  font-size:13px; font-weight:800; letter-spacing:.1em; color:var(--v181-faint);
  line-height:1;
}
/* 이름표가 카드 테두리를 침범하지 않게 위를 넉넉히 비운다(실측: 22px 이면 겹쳤다) */
/* #resultPanel > * { margin:0 } 가 id 특이도로 이긴다(실측) — 같은 꼴로 맞춘다 */
html.v181 body.wzy-v2 #resultPanel .wzyGuaPair{ position:relative; margin-top:30px !important }

/* ══ 풀이 접기 (2026-08-04, 동양타로 레퍼런스) ═══════════════════════════
   결론은 늘 보이고, 근거(흐름·시기·여섯 자리·해볼 일·괘 이야기)는 반쯤 가린 채 접는다.
   동양타로도 답을 먼저 주고 자세한 풀이는 눌러서 펼치게 한다 — 읽는 사람이
   결론부터 얻고, 더 알고 싶을 때만 내려간다. */
html.v181 .wzy-more{ position:relative; margin-top:var(--s3) }
html.v181 .wzy-more-in{ display:flex; flex-direction:column; gap:var(--s3) }
/* 접힌 동안 — 아래를 서서히 흐려 '더 있다'를 보인다. 잘린 것이 아니라 이어진다는 신호다. */
/* 절 경계에서 자른다 (2026-09-07, 육효 v0.6.0 · DESIGN 4-4 · Codex 시안 ②): max-height 와 흐림은 다음 절의
   머리가 반쯤 비쳐 잘린 것처럼 보였다. 접힌 동안 첫 절(보통 흐름)만 온전히 보이고 나머지 절은 감춘다.
   '더 있다'는 아래 '풀이 자세히 보기' 단추가 말한다. */
/* id 를 넣어 #wzyAiPanel .wzy-grp{display:flex}(1,2,1) 을 이긴다 */
html.v181 #wzyAiPanel .wzy-more[data-open="0"] .wzy-more-in > :not(:first-child){ display:none !important }
html.v181 .wzy-more-go{
  display:block; width:100%; margin-top:var(--s2); min-height:44px !important; padding:10px 16px;   /* !important: 아래 button 40px 규칙이 !important 다 */
  border:1px solid var(--v181-line-strong); border-radius:12px;
  background:var(--v181-card,#fff); color:var(--v181-lead);
  font-family:inherit; font-size:13px; font-weight:700; cursor:pointer;
}
html.v181 .wzy-more-go:hover{ border-color:#6d5ae6; color:#6d5ae6 }
html.v181 .wzy-more[data-open="1"] .wzy-more-in{ max-height:none; -webkit-mask-image:none; mask-image:none }

/* 리뷰를 쓰는 동안만 아래에 빈 자리 (2026-08-04, 사용자 제보: 키보드가 칸을 가림).
   리뷰 칸이 페이지 맨 아래라 스크롤할 곳이 없어 칸을 위로 못 올렸다.
   다 쓰고 손을 떼면 여백은 사라진다 — 평소 화면은 그대로다. */
html.v181 body.wzy-kb #resultPanel{ padding-bottom:62vh !important }

/* ── v2 단추 빛내기 (2026-08-04, 사용자 요청) ──────────────────────────
   ★ 폐기: 이 덩이와 js/19 의 v2Glow 만 지우면 된다. 단추는 그대로 돌아간다.
   질문이 채워지면 빛난다.
   빈 칸일 때는 테두리 단추로 조용히 있다가, 물을 것이 생기면 면이 흐른다.
   ★ 주 단추('괘 뽑기')와 겹치지 않게 색을 한 단 밝은 쪽으로 흘린다 —
     두 개가 같은 세기로 빛나면 어느 것을 눌러야 할지 흐려진다. */
@keyframes wzyV2Flow{ to{ background-position:-300% 0 } }
@keyframes wzyV2Pulse{
  0%,100%{ box-shadow:0 4px 14px -6px rgba(109,90,230,.45) }
  50%    { box-shadow:0 8px 22px -6px rgba(109,90,230,.75) }
}
html.v181 #randomMake.hot{
  border-color:transparent !important; color:#fff !important;
  background-image:linear-gradient(100deg,#6d5ae6 0%,#9184d9 22%,#c3b9f7 38%,#9184d9 54%,#6d5ae6 76%,#6d5ae6 100%);
  background-size:300% 100%; background-position:0 0;
  animation:wzyV2Flow 3.2s linear infinite, wzyV2Pulse 2.4s ease-in-out infinite;
  font-weight:800 !important;
}
html.v181 #randomMake.hot:hover{ filter:brightness(1.06) }
@media (prefers-reduced-motion:reduce){
  html.v181 #randomMake.hot{ animation:none; background-position:40% 0 }
}

/* 글자 수 — 밑줄 오른쪽 아래 (2026-08-04, A 시안).
   빈 칸일 때는 더 옅게 둔다. 아직 아무것도 안 썼는데 숫자가 먼저 눈에 들어올 이유가 없다. */
html.v181 .v181QCount{
  margin:6px 2px 0; text-align:right;
  font-size:12px; font-variant-numeric:tabular-nums;
  color:var(--v181-faint); transition:color .15s;
}
html.v181 .v181QCount.idle{ color:#6b60b8 }
/* 빈 칸일 때 흐리게 두던 글자 수(1.5)를 4.5 넘게 (2026-09-17 점검 §2-7). 흐림 대신 색 한 단 */
html.v181 .v181QCount.over{ color:#c2566e }
html.v181 body.dark-mode .v181QCount.idle{ color:rgba(160,146,230,.85) }

/* ══ 펼침 표시와 꼬리표를 한 얼굴로 (2026-08-04, 사용자 지시) ═══════════
   같은 뜻의 것이 자리마다 달랐다 —
     펼침 표시  접힘 바는 26px 테두리 없는 원, 세부 운세는 24px 테두리 있는 원
     꼬리표     흐름·여섯 자리·세부 운세가 저마다 테두리
   테두리를 걷고 옅은 면 하나로 통일한다. 선이 줄면 화면이 조용해진다. */

/* 펼침 표시 — 26px 옅은 보라 원, 테두리 없음 */
/* 펼침 표시 — 더하기표 하나만 (2026-08-04, 사용자 지시).
   갈매기표를 돌리는 움직임이 눈에 거슬린다고 해서 회전을 걷었다. 면도 테두리도 없이
   글자 하나만 검은색으로 둔다. 상태에 따라 기호를 바꾸지 않는다 — 그것이 요청이다.
   ★ 빼기표(U+2212)는 예전에 이 파일에서 2 로 깨진 적이 있다. 더하기표만 쓰면 그 위험이 없다. */
html.v181 .v181Fold > summary::after,
html.v181 .lightFortuneDetails > summary::after,
html.v181 .v181Bar::after,
html.v181 .v181Fold[open] > summary::after,
html.v181 .lightFortuneDetails[open] > summary::after,
html.v181 .v181Bar[aria-expanded="true"]::after{
  content:'+' !important;
  flex:0 0 auto !important; width:auto !important; height:auto !important;
  display:inline !important; border:0 !important; border-radius:0 !important;
  margin:0 !important; padding:0 !important;
  background:none !important; box-shadow:none !important;
  color:var(--v181-ink) !important;
  font-size:17px !important; font-weight:400 !important; line-height:1 !important;
  transform:none !important; transition:none !important;
}
/* 위에서 다 끝났다. 아래 한 줄은 옛 규칙의 잔재를 덮어 두기 위한 것 */
/* (걷어냄 1102행) 열린 상태 기호 — 더하기표 하나로 통일했다. */

/* 꼬리표 — 테두리를 걷고 옅은 면으로. 흐름 · 여섯 자리 · 세부 운세가 같은 모양이 된다. */
html.v181 .wzy-fl-k,
html.v181 .wzy-six-r.on .wzy-six-t,
html.v181 .todayFortunePill{
  border:0 !important; border-radius:6px !important;
  padding:2px 8px !important;
  /* 공용 칩의 min-height:30px 를 물려받아 글자 아래가 한 줄 더 비어 보였다 (2026-08-14 실측:
     글 10.5px · 상자 30px). 누르는 칩이 아니라 읽는 꼬리표라 손가락 자리가 필요 없다. */
  min-height:0 !important; line-height:1.5;
  text-align:center;
  background:rgba(145,132,217,.12) !important;
  color:var(--v181-lead) !important;
  font-size:12px !important; font-weight:800 !important;
}
html.v181 body.dark-mode .wzy-fl-k,
html.v181 body.dark-mode .wzy-six-r.on .wzy-six-t,
html.v181 .autoTag, html.v181 .reasonImpact{ min-height:0 !important; line-height:1.5 }
html.v181 body.dark-mode .todayFortunePill{
  background:rgba(160,146,230,.16) !important;
}

/* ══ 이 괘로 더 묻기 (2026-08-04) ══════════════════════════════════════
   평가를 남긴 뒤에만 열린다. 결과를 다 읽은 사람만 만나는 자리다.
   폐기: 이 덩이와 build.mjs 의 '이 괘로 더 묻기' 덩이, worker 의 KIND.yukhyo_more. */
/* 평가 칸 .wzy-rate-in (2026-09-22) — .wzy-rate 안에서 더 묻기 · 다른 일 **뒤**에 놓인다.
   감싸는 .wzy-rate 가 세로 flex 에 align-items:center 라 이 칸도 폭을 못박고 안을 가운데 모은다.
   더 묻기가 첫 자식이 됐으므로 그 위쪽 줄(border-top)은 걷고, 평가 칸이 그 줄을 이어받는다. */
html.v181 .wzy-rate-in{
  width:100%; align-self:stretch; display:flex; flex-direction:column; align-items:center;
  margin-top:var(--s3); padding-top:var(--s3); border-top:1px solid var(--v181-line);
}
html.v181 .wzy-rate-ro .wzy-rate-in{ display:none }
html.v181 .wzy-rate .wzy-more2:first-child{ margin-top:0; padding-top:0; border-top:0 }

html.v181 .wzy-more2{
  display:flex; flex-direction:column; gap:var(--s2);
  margin-top:var(--s3); padding-top:var(--s3);
  border-top:1px solid var(--v181-line);
  text-align:left;
}
html.v181 .wzy-more2-h{
  font-size:13px; font-weight:800; letter-spacing:.1em; color:var(--v181-faint);
}
/* 상자 하나 — 지나온 문답이 위에 쌓이고 다음 물음을 그 아래에 적는다 (사용자 지시).
   따로 떠 있으면 두 가지 일처럼 보인다. 한 자리에 있어야 이어지는 대화로 읽힌다. */
html.v181 .wzy-more2-box{
  border:1px solid var(--v181-line); border-radius:14px; overflow:hidden;
  background:var(--v181-card,#fff);
}
html.v181 .wzy-more2-box:focus-within{ border-color:rgba(109,90,230,.55) }
html.v181 .wzy-more2-log{ display:block }
html.v181 .wzy-more2-log:empty{ display:none }
/* 문답 한 짝 — 상자 안의 한 칸. 테두리는 상자가 가졌으니 아래 선 하나만 긋는다. */
html.v181 .wzy-more2-qa{
  display:flex; flex-direction:column; gap:var(--s1);
  padding:13px 14px; border:0; border-radius:0;
  background:var(--v181-surface); border-bottom:1px solid var(--v181-line);
}
html.v181 .wzy-more2-q{
  margin:0 !important; font-size:13px; font-weight:800; color:var(--v181-ink);
}
html.v181 .wzy-more2-a{
  margin:0 !important; font-size:13.5px; line-height:1.6; color:var(--v181-body);
}
html.v181 .wzy-more2-a.is-wait{ color:var(--v181-faint); font-style:normal }
/* 묻는 칸 — 리뷰 칸과 같은 결(자란다 · 손잡이 없음) */
html.v181 .wzy-more2-t{
  display:block; width:100%; min-height:52px; max-height:96px; padding:12px 14px 4px;
  /* 다른 층의 textarea 규칙이 !important 로 테두리를 도로 그린다. 여기서 못박는다. */
  border:0 !important; border-radius:0 !important; background:none !important;
  box-shadow:none !important; color:var(--v181-ink);
  font-family:inherit; font-size:13.5px; line-height:1.6;
  resize:none; overflow-y:auto;
}
html.v181 .wzy-more2-t:focus{ outline:0 }
html.v181 .wzy-more2-t::placeholder{ color:rgba(145,132,217,.55) }
html.v181 .wzy-more2-row{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s2);
  padding:0 12px 11px;
}
html.v181 .wzy-more2-n{ font-size:11px; color:var(--v181-faint) }
html.v181 .wzy-more2-go{
  min-height:36px; padding:8px 16px; border-radius:10px; cursor:pointer;
  border:1px solid var(--v181-line-strong); background:var(--v181-card,#fff);
  color:var(--v181-lead); font-family:inherit; font-size:12.5px; font-weight:700;
}
html.v181 .wzy-more2-go:hover:not(:disabled){ border-color:#6d5ae6; color:#6d5ae6 }
html.v181 .wzy-more2-go:disabled{ opacity:.55; cursor:default }
/* 추천 질문 (2026-08-14, 사용자 요청) — 입력칸 아래 단추. 누르면 입력칸에 그대로 채워진다.
   이미 물은 질문은 다시 내밀지 않고, 세 번을 다 쓰면 칸과 함께 사라진다. */
html.v181 .wzy-more2-sug{ padding:0 12px 11px }
html.v181 .wzy-more2-sl{ display:block; font-size:11px; color:var(--v181-faint); margin:0 0 6px }
html.v181 .wzy-more2-sb{ display:flex; flex-wrap:wrap; gap:6px }
html.v181 .wzy-more2-s{
  font-family:inherit; font-size:12px; line-height:1.45; text-align:left; color:var(--v181-body);
  background:var(--v181-surface); border:1px solid var(--v181-line); border-radius:999px;
  padding:7px 12px; cursor:pointer;
}
html.v181 .wzy-more2-s:hover{ border-color:#6d5ae6; color:#6d5ae6 }

/* ══ 풀이를 펼치기 전에는 그 아래를 감춘다 (2026-08-04, 사용자 지시) ═══════
   '풀이 자세히 보기'가 그 화면의 끝이 되게 한다. 아직 읽지 않은 사람에게
   꼬리말·별점·더 묻기까지 한꺼번에 보이면 어디까지가 답인지 흐려진다. */
html.v181 body.wzy-fold2 #wzyAiPanel .wzy-ai-foot,
html.v181 body.wzy-fold2 #v181Bar-why,
html.v181 body.wzy-fold2 .wzy-rate{ display:none !important }

/* 감춘 것들이 남긴 빈칸을 걷는다 (2026-08-04, 사용자 지적).
   '풀이 자세히 보기'가 그 화면의 끝인데 아래로 106px 이 비어 있어,
   스크롤하면 아무것도 없는 자리에서 멈췄다. 접었을 때만 여백을 줄인다 —
   펼치면 아래에 평가·더 묻기가 이어지므로 원래 여백이 그대로 필요하다. */
html.v181 body.wzy-fold2 #resultPanel{
  margin-bottom:0 !important; padding-bottom:0 !important;
}
html.v181 body.wzy-fold2 #wzyAiPanel .wzy-more{ margin-bottom:0 !important }
html.v181 body.wzy-fold2 .wzy-ai-out{ padding-bottom:0 !important }
/* 셸이 화면 높이를 꽉 채우도록 되어 있어(짧은 화면에서도 바탕이 이어지게) 접었을 때
   단추 아래가 120px 남짓 비었다. 바탕색은 html 이 들고 있으므로 여기서 최소 높이를 풀어도
   화면이 끊기지 않는다. 펼치면 아래로 평가·더 묻기가 이어져 저절로 길어진다. */
html.v181 body.wzy-fold2 .shell{ min-height:0 !important }
html.v181 body.wzy-fold2 .layout{ min-height:0 !important }

/* 동효 범례를 걷는다 (2026-08-04, 사용자 지시) — 그림 안의 점이 이미 그것을 말하고 있다. */
html.v181 .wzyGuaPair .wzyLegend{ display:none !important }

/* ══ 용신 기준 — 두 걸음 (2026-08-04, 사용자 채택안) ══════════════════════
   갈래도 세부와 같은 긴 바다. 한 번에 한 겹만 보이고 '이전'으로 돌아온다.
   옛 3열 사각 격자(.v122gt / .v122pickGroups / .v122ic)는 만들지 않고 각 층에서 걷었다 —
   여기 규칙이 그 자리를 대신한다.
   폐기: 이 덩이와 js/12 buildCategoryPicker 를 옛 판으로 되돌리면 된다. */
.v122two{ display:flex; flex-direction:column; gap:0 }
.v122two .v122step{ display:none; flex-direction:column; gap:6px }
.v122two.at1 .v122s1,
.v122two.at2 .v122s2{ display:flex }

/* 갈래 한 줄 — 세부 바(.v122chip)와 같은 키·같은 모서리로 맞춘다 */
.v122two .v122g2{
  display:flex; align-items:center; gap:10px; width:100%;
  min-height:46px; padding:10px 12px; cursor:pointer;
  border:1px solid var(--v181-line, rgba(145,132,217,.28)); border-radius:10px;
  background:var(--v181-card,#fff); color:var(--v181-body,#4a4463);
  font-family:inherit; font-size:13.5px; font-weight:400; text-align:left;
}
.v122two .v122g2:hover{ border-color:#6d5ae6 }
.v122two .v122g2:focus-visible{ outline:2px solid #6d5ae6; outline-offset:2px }
.v122two .v122g2.active{ border-color:#6d5ae6; background:rgba(109,90,230,.08) }
.v122two .v122g2.active .v122nm{ color:#4a3fb5; font-weight:800 }
.v122two .v122em{ flex:none; width:19px; text-align:center; font-size:15px; line-height:1 }
.v122two .v122nm{ flex:1; min-width:0; color:var(--v181-ink,#292b31); font-weight:600 }
.v122two .v122ct{
  flex:none; font-size:11.5px; color:var(--v181-faint,#a29ebb);
  font-variant-numeric:tabular-nums;
}
/* 더 들어갈 곳이 있다는 표시 — 갈매기표 하나 */
.v122two .v122ch{
  flex:none; width:6px; height:6px; margin-right:2px;
  border-right:1.6px solid var(--v181-faint,#a29ebb);
  border-bottom:1.6px solid var(--v181-faint,#a29ebb);
  transform:rotate(-45deg);
}

/* 두 번째 걸음 — 되돌아가기와 지금 갈래 */
.v122two .v122back{
  align-self:flex-start; display:inline-flex; align-items:center; gap:7px;
  margin:0 0 2px; padding:6px 2px; border:0; background:none; cursor:pointer;
  color:var(--v181-lead,#5b4fa8); font-family:inherit; font-size:12.5px; font-weight:700;
}
.v122two .v122back i{
  width:6px; height:6px; border-left:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor; transform:rotate(45deg);
}
.v122two .v122back:hover{ color:#6d5ae6 }
.v122two .v122gh{
  display:flex; align-items:center; gap:8px; margin:0 0 4px; padding:0 2px;
  color:var(--v181-ink,#292b31); font-size:14px; font-weight:800;
}

/* 다크에서는 시트 바탕과 같은 면으로 둔다 (2026-08-04, 사용자 지적: 보라가 얼룩져 보임).
   고른 것은 채우지 않고 테두리와 글자로만 표시한다 — 열 줄이 늘어선 자리라
   면을 칠하면 그 줄만 떠올라 나머지가 눌린 것처럼 보인다. */
body.dark-mode .v122two .v122g2{
  background:transparent;
  border-color:rgba(160,146,230,.20);
}
body.dark-mode .v122two .v122g2:hover{ border-color:rgba(160,146,230,.44) }
body.dark-mode .v122two .v122g2.active{ background:transparent; border-color:#8f7df5 }
body.dark-mode .v122two .v122g2.active .v122nm{ color:#c3b6ff }

/* ══ 어두울 때의 결 손보기 (2026-08-04, 사용자 지시) ══════════════════════
   다크에서 화면을 훑어 보고 세 가지를 고친다. 새 요소를 만들지 않고 이미 있는 것의
   크기·밝기만 바꾼다 — 폐기하려면 이 덩이만 지우면 원래대로 돌아온다. */

/* ③ 점수 — 판정과 한 짝으로. 오른쪽 위에 흐리게 떠 있어 장식처럼 보였다.
   판정을 뒷받침하는 값이므로 또렷하게 두고 글자도 판정과 같은 결로 맞춘다. */
html.v181 body.dark-mode .wzy-ans-sc{
  color:var(--v181-lead) !important;
  font-size:13px !important; font-weight:800 !important;
  opacity:.92;
}

/* ④ 흐름의 점 — 다크에서 채도가 높아 글보다 먼저 눈에 띄었다.
   크기를 줄이고 밝기를 낮춘다. 뜻(좋음·보통·주의)은 그대로 남는다. */
html.v181 body.dark-mode .wzy-dot{
  width:6px !important; height:6px !important; margin-top:7px;
  filter:saturate(.72) brightness(.92);
}

/* ⑤ 바탕에 아주 옅은 결 — 결과가 길어 스크롤이 많은데 배경이 내내 같아 심심했다.
   맨 위에만 한 겹 두고 아래로 갈수록 사라진다. 성운·별 같은 그림이 아니라
   보랏빛이 아주 옅게 번지는 정도다(다른 앱에서 걷어낸 하늘과는 다른 것이다). */
/* ★ 바탕색은 육효만 비어 있었다 (2026-08-04 실측: html·body·shell 이 모두 투명이라
   브라우저 기본 검정이 그대로 보였다). 다른 네 앱은 하늘 겹이 html 에 색을 주는데
   육효에는 그 겹이 없어 다섯 앱 통일에서 혼자 빠졌다. 여기서 채운다 —
   스크롤 끝까지 이어져야 하므로 body 가 아니라 html 이 든다. */
html.v181{ background:#faf8ff }
html.v181.wz-dark{ background:var(--wz-d-bg, #161826) }

html.v181 body.dark-mode::before{
  content:''; position:fixed; left:0; right:0; top:0; height:300px;
  pointer-events:none; z-index:0;
  background:radial-gradient(120% 100% at 50% -30%,
    rgba(138,120,224,.16) 0%, rgba(138,120,224,.05) 45%, rgba(138,120,224,0) 78%);
}
/* ── 배경의 움직임 (2026-08-04, 사용자 지시: A+B) ──────────────────────
   ★ 읽는 동안에는 움직이지 않는다. 결과 화면에서 배경이 흔들리면 눈이 그리로 끌린다.
     그래서 첫 화면(질문 적는 곳)에서만 아주 느리게 숨 쉬고,
     괘가 서는 그 순간에만 한 번 밝아졌다 가라앉는다.
   ★ 바뀌는 것은 겹 하나의 opacity 뿐이라 그리는 부담이 없다. */

/* B — 첫 화면에서만 아주 느린 숨쉬기. 결과가 서면 body 의 화면 표시가 바뀌어 저절로 멈춘다. */
html.v181 body.dark-mode.app-view-input::before{
  animation:wzyBgBreathe 25s ease-in-out infinite;
}
@keyframes wzyBgBreathe{
  0%, 100% { opacity:.72 }
  50%      { opacity:1 }
}

/* A — 괘가 서는 순간 한 번. js 가 body 에 wzy-cast 를 잠깐 붙인다. */
html.v181 body.dark-mode.wzy-cast::before{
  animation:wzyBgCast 1.2s cubic-bezier(.22,.9,.28,1) 1;
}
@keyframes wzyBgCast{
  0%   { opacity:.6;  transform:translateY(-6px) }
  35%  { opacity:1;   transform:translateY(0) }
  100% { opacity:.85; transform:translateY(0) }
}

@media (prefers-reduced-motion: reduce){
  html.v181 body.dark-mode::before{ opacity:.7 }
  html.v181 body.dark-mode.app-view-input::before,
  html.v181 body.dark-mode.wzy-cast::before{ animation:none }
}

/* ② 꼬리표를 갈래별로 (2026-08-04, 사용자 지시) — 색이 뜻을 나른다.
   나는 밝은 보라, 상대는 청록, 비었음은 흐린 회보라, 용신(이 물음의 중심)은 가장 또렷하게.
   갈래를 못 매긴 것은 지금 색 그대로 남는다. */
/* 앞선 규칙(1090행 근처)이 color 를 !important 로 못박고 있어 특이도만으로는 못 이긴다(실측).
   같은 꼴을 함께 적고 !important 로 맞춘다 — 그쪽이 먼저 쓴 무기라 여기서도 같은 것을 쓴다.
   ★ 언젠가 그 블록에서 color 를 걷어내면 여기 !important 도 함께 뺄 수 있다. */
html.v181 .wzy-six-t.k-key,
html.v181 .wzy-six-r.on .wzy-six-t.k-key{
  background:rgba(160,146,230,.24) !important; color:#cabffc !important; font-weight:800 !important;
}
html.v181 .wzy-six-t.k-self,
html.v181 .wzy-six-r.on .wzy-six-t.k-self{
  background:rgba(160,146,230,.16) !important; color:#b5a8f2 !important;
}
html.v181 .wzy-six-t.k-other,
html.v181 .wzy-six-r.on .wzy-six-t.k-other{
  background:rgba(96,178,190,.20) !important; color:#7fd0d8 !important;
}
html.v181 .wzy-six-t.k-empty,
html.v181 .wzy-six-r.on .wzy-six-t.k-empty{
  background:rgba(150,145,175,.14) !important; color:#9b95b4 !important;
}
/* 밝은 화면에서 흐려 보였다 (2026-08-05, 사용자 지적) — 10.5px 작은 글씨라
   대비 5.2 로는 모자랐다. 글자를 한 단 어둡게, 면을 조금 진하게 해 7 위로 올린다. */
/* 밝은 화면에서는 '나'와 '중심'도 어두운 쪽으로 (2026-08-05, 청록과 같은 이유) —
   갈래 색을 어두운 화면 기준으로만 잡아 두어 밝은 화면에서 흐렸다. */
html.v181 body:not(.dark-mode) .wzy-six-t.k-self,
html.v181 body:not(.dark-mode) .wzy-six-r.on .wzy-six-t.k-self{
  background:rgba(109,90,230,.12) !important; color:#4a3fb5 !important;
}
html.v181 body:not(.dark-mode) .wzy-six-t.k-key,
html.v181 body:not(.dark-mode) .wzy-six-r.on .wzy-six-t.k-key{
  background:rgba(109,90,230,.18) !important; color:#3d3399 !important;
}
html.v181 body:not(.dark-mode) .wzy-six-t.k-other,
html.v181 body:not(.dark-mode) .wzy-six-r.on .wzy-six-t.k-other{
  background:rgba(20,110,122,.16) !important; color:#0f545c !important;
}
html.v181 body:not(.dark-mode) .wzy-six-t.k-empty,
html.v181 body:not(.dark-mode) .wzy-six-r.on .wzy-six-t.k-empty{
  background:rgba(120,115,145,.12) !important; color:#6d6885 !important;
}

/* ══ 용어 말풍선 (2026-08-04, 사용자 제안) ═══════════════════════════════
   누른 자리 옆에 한 줄로 뜬다. 폐기하려면 이 덩이와 build.mjs 의 WORDS 덩이만 지운다. */
/* 가급적 한 줄로 (2026-08-05, 사용자 지시) — 몇 글자 때문에 줄이 넘어가면 볼품없다.
   · width:max-content — 짧은 말은 상자도 짧게, 넓힌 만큼 빈 자리가 남지 않는다
   · max-width 를 260 -> 320 으로 — 한 줄에 들어갈 말이 폭 때문에 넘어가던 것을 줄인다
   · keep-all + balance — 넘어갈 때도 낱말 가운데서 끊지 않고 두 줄 길이를 고르게 맞춘다 */
html.v181 .wzy-tip{
  position:fixed; z-index:2000040;
  width:max-content; max-width:min(320px, calc(100vw - 24px));
  word-break:keep-all; text-wrap:balance;
  display:flex; flex-direction:column; gap:6px;
  padding:11px 13px; border-radius:12px;
  border:1px solid var(--v181-line-strong);
  background:var(--v181-card,#fff);
  box-shadow:0 12px 30px -12px rgba(40,30,90,.45);
  font-size:12.5px; line-height:1.55; color:var(--v181-body);
}
/* 낱말과 뜻이 한 줄로 이어진다 (2026-08-05) — 줄은 낱말이 여럿일 때만 갈린다 */
html.v181 .wzy-tip-r{ display:block }
html.v181 .wzy-tip b{
  display:inline; font-size:12.5px; font-weight:800; color:#6d5ae6; margin:0 5px 0 0;
}
html.v181 body.dark-mode .wzy-tip b{ color:#b5a8f2 }
html.v181 .wzy-tip span{ display:inline }
/* 누를 수 있다는 것을 아주 옅게 알린다 — 여섯 줄마다 물음표를 붙이면 화면이 시끄러워진다 */
html.v181 .wzy-fl-k,
html.v181 .wzy-six-n,
html.v181 .wzy-six-t,
html.v181 .wzy-six-k{ cursor:help }

/* ══ 투자 결과의 차례 (2026-08-05, 사용자 요청으로 다시 잡음) ═══════════
   전에는 '⏱ 추천 타이밍 TOP 3'(362px)이 AI 답보다 **위**에 있었다.
   물은 것이 "언제"라도 먼저 알고 싶은 것은 답이다 — 판정이 '아직이에요'인데
   그 위에 구체적 시각이 크게 떠 있으면 어느 쪽이 답인지 흐려진다.
   답(판정·흐름·시기)을 먼저 읽고, 그 다음에 정밀 후보를 본다.
   자리만 바꾼다 — 두 블록 다 앱이 만든 그대로다. */
html.v181 .lightUserReport{ display:flex !important; flex-direction:column }
html.v181 .lightUserReport > #lightAiSlot{ order:1 }
html.v181 .lightUserReport > .lightTimingCard{ order:2; margin-top:var(--s3) }

/* 정밀 후보가 무엇인지 한 줄로 밝힌다 — 12일 주기라 가장 가까운 때만 나온다.
   '올해 안'처럼 길게 물으면 이 카드로는 다 답할 수 없고, 넓은 시기는 위 【시기】가 맡는다. */
html.v181 .lightTimingCard::before{
  content:'가장 가까운 시각 후보예요. 더 먼 시기는 위 시기 항목을 보세요.';
  display:block; margin:0 0 var(--s2);
  font-size:11.5px; line-height:1.5; color:var(--v181-faint);
}

/* 물은 기간에 해당하는 층 (2026-08-05) — 나머지는 참고로 물러난다.
   셋 다 답이지만 물은 것이 먼저 읽혀야 한다. */
html.v181 .tradeHorizonGrid .hzCell.is-asked{
  border:1px solid rgba(109,90,230,.42); border-radius:10px;
  padding:8px 10px; background:rgba(109,90,230,.07);
}
html.v181 .tradeHorizonGrid .hzCell.is-asked strong{ color:#4a3fb5; font-weight:800 }
html.v181 .tradeHorizonGrid.has-asked .hzCell:not(.is-asked){ opacity:.72 }
html.v181 body.dark-mode .tradeHorizonGrid .hzCell.is-asked{
  border-color:rgba(160,146,230,.44); background:rgba(160,146,230,.12);
}
html.v181 body.dark-mode .tradeHorizonGrid .hzCell.is-asked strong{ color:var(--v181-lead) }


/* ══ 결과 칸의 폭을 한 자리에서 정한다 (2026-08-25, 사용자 지적) ═══════════════
   요약(#lightSummaryPanel)과 자동 풀이(#autoPanel)는 `max-width:640px + margin:auto` 로
   가운데 섰는데, 괘 그림과 아래 세 블록은 그 줄에서 벗어나 있었다. 실측(1440px):

     lightSummaryPanel  max 640  margin auto/auto     ← 가운데
     autoPanel          max 640  margin auto/auto     ← 가운데
     wzyGuaPair         max 640  margin 0/0           ← 왼쪽에 붙는다
     newCastBottom      max 640  margin 0/0           ← 왼쪽에 붙는다
     v181Bar / wzy-rate 상한 없음                      ← 혼자 폭이 넓다

   ★ 왜 auto 가 죽었나. 특이도 싸움이다.
     · 괘 쌍: 파일 21 의 `html.wzy-on .wzyGuaPair{margin-*:auto!important}` 와
       파일 22 의 `html.v181 .wzyGuaPair{margin:0!important}` 가 **같은 (0,2,1)** 이라
       뒤에 오는 파일 22 가 이긴다. 짧은 쪽(margin:0)이 이겨 auto 가 지워졌다.
     · 새로 뽑기: `#resultPanel .newCastBottom{margin:10px 0 2px!important}`(1,1,0)이
       `html.wzy-on .newCastBottom{margin-*:auto!important}`(0,2,1)을 이긴다.
   두 자리를 따로 손보면 다음에 또 어긋난다. **결과 칸에 서는 블록을 한 규칙으로 묶어**
   맨 끝에 둔다. `#resultPanel >` 를 써서 위의 어느 규칙보다 특이도가 높다.
   ★ 상하 여백은 안 건드린다. 블록마다 사정이 다르고, 여기서 다루는 것은 폭이다.
   ★ AI 풀이 본문(#wzyAiPanel)도 여기 넣었다 (2026-08-25 사용자 결정). 혼자 868px 이라
     읽는 글줄이 나머지보다 길었다. 한 줄에 담기는 글자 수가 블록마다 다르면 눈이 매번
     줄 길이를 다시 잰다. 결과 칸에 서는 것은 전부 같은 폭이다.
   ★ 투자 유의사항 띠(#investmentWarning)와 '이렇게 해 보세요'(#v181Steps)도 넣었다
     (2026-09-07, 사용자 지적: 유의사항 띠만 오른쪽으로 간격이 넓다). 둘 다 이 묶음보다
     뒤에 생긴 블록이라 빠져 있었다. 실측(900px): 나머지 640 인데 둘은 868. 띠의 글은
     왼쪽 끝, 여닫이 표식(▾)은 오른쪽 끝이라 그 사이가 비어 보였다. 375px 에서는 전부
     357 로 같아 안 드러난다. 03-v169 의 `margin:14px 0 0!important`(0,1,0)보다 여기
     (0,2,1)의 auto 가 세니 따로 손댈 것이 없다. */
html.v181 #resultPanel > #investmentWarning,
html.v181 #resultPanel > #v181Steps,
html.v181 #resultPanel > .wzyAiFailTop,
html.v181 #resultPanel > #wzyAiPanel,
html.v181 #resultPanel > .wzyGuaPair,
html.v181 #resultPanel > .newCastBottom,
html.v181 #resultPanel > #v181Brow,
html.v181 #resultPanel > .v181Bar,
html.v181 #resultPanel > .wzy-rate,
html.v181 #resultPanel > .wzy-more,
html.v181 #resultPanel > #resultTools,
/* '이 질문은 ~로 봤어요' 확인 줄 (2026-08-30, 사용자 지적: 혼자 폭이 넓다) —
   .layout 직속이라 #resultPanel > 묶음에 못 들어 따로 적는다. 기준은 같은 40rem 이다. */
html.v181 .wzyYsBar {
  width:100%;
  max-width:40rem;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* ══ 직설 모드 토글 (2026-08-27, 기획_육효직설모드) ═══════════════════════ */
/* ★ 위 「누구를 보나요」 줄과 16px 은 띄운다 (2026-08-28 실측). 두 줄 다 닿는
   자리를 44px 로 넓혀 두어, 알약 중심끼리 44px 밑으로 붙으면 위엣것이 아래것의
   자리를 잡아먹는다(DESIGN 4-2 조건 2, 실측 4/5 로 떨어졌다). 16px 이면 중심
   거리가 50px 이라 둘 다 온전하다. */
.v181Fact{ display:flex; align-items:center; gap:8px; margin:16px 0 2px; }
/* 위의 「누구를 보나요?」 라벨과 같은 폭 — 두 줄의 알약이 같은 x 에서 시작한다 */
.v181FactLab{ flex:0 0 auto; min-width:5.4em; font-size:12.5px; font-weight:500; opacity:.78; }
.v181FactBtn{
  position:relative;
  min-height:34px; height:34px; padding:0 13px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(145,132,217,.45); border-radius:999px;
  background:transparent; color:var(--v181-muted,#595d6c);
  font-size:12.5px; font-weight:600; line-height:1; cursor:pointer;
  transition:background-color .16s ease, border-color .16s ease;
}
/* 닿는 자리를 44px 로 넓힌다 (2026-08-28) — 보이는 크기는 34px 그대로다.
   DESIGN §4-2 가 허락한 수법이고, 위아래로만 넓혀 옆 것을 덮지 않는다. */
.v181FactBtn::after{
  content:''; position:absolute; left:0; right:0; top:50%;
  height:44px; transform:translateY(-50%);
}
/* 켜짐은 채우지 않고 틴트다 (2026-08-28 사용자 지적: 알약 언어가 카드 안에서 어긋난다).
   솔리드 진보라(--v181-lead)는 카드의 주 CTA 와 겨루고, 바로 위 「누구를 보나요」
   고르개와도 다른 말을 했다. 육효가 aria-pressed 토글에 쓰는 결(--wzy-sel)로 맞춘다. */
.v181FactBtn[aria-pressed="true"]{
  background:rgba(145,132,217,.16); border-color:rgba(145,132,217,.85);
  color:var(--ink, #1b1c20);
}
body.dark-mode .v181FactBtn[aria-pressed="true"]{ color:var(--ink, #efe9ff); }
.v181FactCap{
  /* 12.5px · --v181-muted, opacity 걷음 (2026-09-07, v0.4.5): 12px 에 .92 를 곱해 다크 4.4:1 이었다 */
  font-size:12.5px; color:var(--v181-muted,#595d6c); line-height:1.6;
  /* 낱말 중간에서 꺾이지 않게 (2026-08-27 사용자 지적: "꺼 두세/요."로 갈라졌다) */
  word-break:keep-all; overflow-wrap:break-word; text-wrap:pretty;
}
/* 폰에서는 설명이 알약 옆에 끼면 두 줄로 접혀 줄이 들쭉날쭉해진다. 아래로 내린다 */
@media (max-width:559.98px){
  .v181Fact{ flex-wrap:wrap; }
  .v181FactCap{ flex-basis:100%; margin-left:calc(5.4em + 8px); margin-top:.15rem; }
}

/* 팩트모드 진입·해제 토스트는 한 줄 (2026-08-27 사용자 지시).
   폭이 아주 좁으면 글자를 살짝 줄여서라도 한 줄을 지킨다. */
.toast.wzyToastOne{
  white-space:nowrap; width:max-content; max-width:calc(100vw - 24px);
  font-size:clamp(12px, 3.7vw, 14px);
}

/* ══ 되살린 화면의 평가 상자 (2026-08-28, 사용자 결정 2) ═══════════════════
   보관 키로 연 화면에서는 평가와 저장 단추를 안 낸다. 상자만 남겨 「더 묻기」를
   담는데, 그 상자가 결과판에서는 테두리 있는 카드라(21-v180-woozoo-tone.css:1672)
   더 묻기가 비면 **빈 카드가 덩그러니 남는다.** 비었을 때만 접는다. */
html.wzy-on #resultPanel > .wzy-rate-ro:empty{
  display:none !important; padding:0 !important; border:0 !important;
  background:none !important; margin:0 !important;
}

/* 다른 일 물어보기 (2026-08-30, 기획_다른일순환) — 더 묻기와 같은 옷, 하는 일만 다르다.
   ★ 세로 flex + gap 도 같은 옷의 일부다 (2026-08-30 사용자 지적: 제목이 상자 테두리에
   붙는다). wzy-more2 는 gap 이 제목과 상자 사이를 띄우는데 여기만 빠져 있었다. */
html.v181 .wzy-other{
  display:flex; flex-direction:column; gap:var(--s2);
  margin-top:var(--s3); padding-top:var(--s3);
  border-top:1px solid var(--v181-line);
  text-align:left;
}
html.v181 .wzy-other-p{
  margin:0; padding:12px 14px 0; font-size:12px; line-height:1.6; color:var(--v181-faint);
}

/* ══ 누르는 것의 세로 바닥값 · 입력칸 글자 (2026-09-01 사용자 지시) ══════════════
   이 앱은 css/ 파일 스물둘을 뒤에 얹어서, 본문 style 에 넣은 규칙이 여기서 덮인다.
   그래서 맨 마지막 파일에 한 번 더 적는다. 뜻은 같다.
   16px 미만 입력칸은 아이폰이 초점을 받을 때 화면을 확대하고, 세로 40px 아래
   단추는 손가락으로 자꾸 빗나간다. */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([disabled]),
select:not([disabled]):not([hidden]),
textarea:not([disabled]):not([hidden]){font-size:16px}
/* 이 앱은 옛 CSS 가 곳곳에 !important 로 높이를 박아 뒀다(01-base 의 min-height:0 등).
   바닥값이니 같은 무게로 맞선다. 다른 앱에서는 !important 없이도 이긴다. */
button:not(.destiny-help):not(.tm-privacy-btn):not(.sr-chev):not(.tagHelp):not(.sijinHelpBtn):not(.fieldHelp){min-height:40px!important}
.seg button,.wzySeg button,.btn{min-height:40px!important}

/* ── 근거 태그의 ? 표식 (v0.4.3, 2026-09-06 사용자 지적: 세로로 늘어난 흰 타원) ─────────
   v0.4.0 의 40px 단추 규칙이 이 표식까지 잡아 알약 안에서 40px 타원이 됐다. 위 규칙에서
   뺐고(줄 속 표식은 크기가 아니라 09-v131 의 ::after 44px 히트 영역으로 손가락을 받는다),
   겉은 흰 스티커 대신 알약 글자색을 따르는 18px 고리로 둔다. v166 의 다크 흰 면 규칙이
   !important 라 같은 무게로 맞선다. */
html.v181 .autoTag{ display:inline-flex; align-items:center; gap:7px; padding:6px 9px 6px 12px !important; }
html.v181 .tagHelp, html.v181 body.dark-mode .tagHelp{
  width:18px !important; height:18px !important; min-height:0 !important; padding:0 !important; margin:0 !important;
  border-radius:50% !important; border:1.5px solid currentColor !important; background:transparent !important;
  color:inherit !important; opacity:.72; font:800 11px/1 var(--font-ui) !important; box-shadow:none !important;
  display:inline-grid; place-items:center; flex:none;
}
html.v181 .tagHelp:hover, html.v181 .tagHelp:focus-visible{ opacity:1; }

/* ── AI 실패 안내를 결과 맨 위에도 (v0.4.5, 2026-09-07 · Codex 점검 P1) ─────────
   실패 문장과 '다시 받기'가 기본 해석 아래(832px 화면에서 y=1058)에만 있어 첫 화면에서는
   실패를 알 수 없었다. build.mjs 의 aiFailTop 이 #resultPanel 에 놓고, 자리는 질문 줄(-70)과
   괘 그림(-65) 사이다. 색은 DESIGN 2-1 의 경고색을 글자와 테두리에만 쓴다(넓은 면은 안 칠한다). */
html.v181 #resultPanel > .wzyAiFailTop{ order:-66 !important }
html.v181 .wzyAiFailTop{
  --wzy-warn:#8a4b2a;
  box-sizing:border-box; padding:12px 14px; border:1px solid var(--wzy-warn); border-radius:14px;
  background:transparent; color:var(--v181-ink); word-break:keep-all; overflow-wrap:anywhere;
}
html.v181 body.dark-mode .wzyAiFailTop{ --wzy-warn:#d99a72 }
html.v181 .wzyAiFailTop b{ display:block; font-size:14px; font-weight:700; color:var(--wzy-warn) }
html.v181 .wzyAiFailTop p{ margin:4px 0 10px; font-size:13px; line-height:1.6; color:var(--v181-body) }
html.v181 .wzyAiFailTop button{
  display:block; width:100%; min-height:44px; padding:10px 16px;
  border:1px solid var(--v181-line-strong); border-radius:12px;
  background:var(--v181-card,#fff); color:var(--v181-lead);
  font-family:inherit; font-size:13px; font-weight:700; cursor:pointer;
}
html.v181 .wzyAiFailTop button:hover{ border-color:#6d5ae6; color:#6d5ae6 }

/* ── 2차 묶음 (v0.5.0, 2026-09-07 · Codex 점검 P2) ───────────────────────────
   ① 주제 확인 줄을 main(#resultPanel) 안에 둔다. 질문 줄(-70)보다 앞. 아래 여백은 flex gap 이 맡는다.
   ② 질문 줄이 1단계 제목이자 초점 자리다. 프로그램이 옮긴 초점은 고리를 안 그리고, 키보드로 왔을 때만 그린다.
   ③ 눌리는 넓이 44px: 결과 보기 원 단추(40px 그림)는 ::after 로, 나머지는 높이로. */
/* 주제 확인 줄 — 질문 줄 바로 아래 한 줄 (2026-09-07, v0.6.0 · Codex 시안 ①). 카드였을 때는 질문보다 먼저 읽혔다. */
html.v181 #resultPanel > .wzyYsBar{
  /* 좌우 auto 가 있어야 40rem 묶음과 같은 자리에 선다. margin:-8px 0 0 으로 적었더니 넓은 화면에서
     줄만 왼쪽에 붙었다(2026-09-08 사용자 지적, 888px 실측). */
  order:-69 !important; margin:-8px auto 0 !important; padding:0 2px !important;
  background:none !important; border:0 !important; border-radius:0 !important;
  justify-content:flex-start !important; gap:4px !important;
  font-size:13px !important; color:var(--v181-muted) !important;
}
html.v181 #resultPanel .wzyYsBar b{ color:var(--v181-ink); font-weight:700 }
html.v181 #resultPanel .wzyYsBar button{
  border:0 !important; background:none !important; padding:0 6px !important;
  color:var(--v181-lead) !important; font-size:13px !important; font-weight:600 !important;
  text-decoration:underline; text-underline-offset:3px;
}
/* 가운뎃점은 밑줄 밖에 (2026-09-08 사용자 지적). 부모의 text-decoration 은 자식에 '전파'되어 none 으로는 못 끈다 —
   inline-block 안에는 전파되지 않으므로 상자로 만든다. */
html.v181 #resultPanel .wzyYsBar button::before{ content:'·'; display:inline-block; margin-right:6px; color:var(--v181-faint); text-decoration:none }
/* 제목은 누르는 것이 아니라 고리를 그리지 않는다. 화면이 넘어왔다는 것은 읽어 주는 기계가 제목을 읽어 알린다. */
html.v181 #wzyV2Asked:focus, html.v181 #wzyV2Asked:focus-visible{ outline:none }
/* 특이도: 앱의 button:not(…)×5 40px !important (0,5,1) 를 이기려면 id 가 필요하다 */
html.v181 #resultPanel .wzyYsBar button{ min-height:44px !important }
html.v181 #wzyAiPanel .wzy-more-go{ min-height:44px !important }


/* ── 입력 칸 물음표 · 필수 표시 (2026-09-08, 육효 v0.7.1) ──────────────────────────
   성별은 연애·혼인 용신을 가르므로 필수다. 까닭은 ? 를 누르면 격자 아래 한 줄로 열린다(aria-expanded · aria-controls). */
html.v181 .catReq{ color:var(--v181-lead); opacity:1 }
/* 도움 단추: 보이는 고리 18px · 누르는 칸 40px (2026-09-17 점검 §2-6). 고리는 가상 요소로 그리고 음수 여백으로
   이름표 줄 높이는 그대로 둔다. 글자는 12px(DESIGN §3 하한). */
html.v181 .fieldHelp, html.v181 body.dark-mode .fieldHelp{
  display:inline-grid !important; place-items:center; position:relative; isolation:isolate; width:40px !important; height:40px !important; min-height:0 !important;
  margin:-11px -11px -11px -5px !important; padding:0 !important; border:0 !important; border-radius:50% !important; flex:none;
  background:transparent !important; box-shadow:none !important;
  color:var(--v181-muted) !important; font:800 12px/1 var(--font-ui) !important; cursor:pointer; vertical-align:middle; opacity:.72;
}
html.v181 .fieldHelp::before{ content:""; position:absolute; left:50%; top:50%; width:18px; height:18px; transform:translate(-50%,-50%); border-radius:50%; border:1.5px solid currentColor; box-sizing:border-box; z-index:-1 }
html.v181 .fieldHelp:hover, html.v181 .fieldHelp:focus-visible{ opacity:1; color:var(--v181-lead); }
html.v181 .fieldHelp:hover::before, html.v181 .fieldHelp:focus-visible::before{ border-color:var(--v181-lead) }
html.v181 .fieldHelp[aria-expanded="true"]{ color:#fff !important; opacity:1 }
html.v181 .fieldHelp[aria-expanded="true"]::before{ background:var(--v181-lead); border-color:var(--v181-lead) }
html.v181 .fieldHelpNotes{ margin:0 }
html.v181 .fieldHelpNote{
  margin:6px 0 0; padding:9px 11px; border-radius:10px;
  background:var(--v181-surface, rgba(145,132,217,.08)); color:var(--v181-muted);
  font-size:12.5px; line-height:1.55;
}
/* 비운 채 뽑으면 성별 칸이 잠깐 깜빡인다 */
html.v181 #gender.needPick{ outline:2px solid var(--v181-lead); outline-offset:2px; animation:v181NeedPick 1.8s ease-out }
@keyframes v181NeedPick{ 0%,60%{ box-shadow:0 0 0 4px rgba(145,132,217,.28) } 100%{ box-shadow:none } }