/* ============================================================
   v180 — 우주 육효 개편 (handoff-6ix/SPEC.md, 2026-07-25)

   왜 새 파일인가: 이 앱은 버전마다 번호 레이어를 끝에 얹으며 자라 왔다.
   CSS 20개를 헤집는 대신 같은 관례를 따른다 — 로드 순서상 여기가 마지막이라
   기존 규칙을 덮을 수 있고, 문제가 생기면 이 파일과 짝 JS 만 빼면 원상복구된다.

   두 부분으로 나뉜다.
     1) 팔레트 — JS 없이도 안전하므로 무조건 적용한다.
     2) 구조 — html.wzy-on 아래에만 둔다. 짝인 js/18-v180 이 마크업을 만든 뒤에야
        뜻이 있고, JS 가 죽었을 때 반쪽만 적용돼 화면이 깨지는 것을 막는다.

   시안과 다르게 한 것 (이유는 각 자리에 적었다)
     · 시안의 .topbar(← 우주운세 / 육효 / 메뉴)는 만들지 않는다.
       woozoo.pro 가 주입하는 허브 바(#wz-bar)가 이미 그 세 가지를 한다.
     · 용신 기준은 시안이 10종 평면 목록인데, 앱은 그룹 → 세부 2단계로 더 넓다.
       기능을 줄이지 않고 앱 분류를 그대로 두고 톤만 맞춘다.
   ============================================================ */

/* ── 1) 팔레트 ─────────────────────────────────────────── */
:root{
  /* accent ramp — 인덱스 개편안과 같은 값 */
  --wzy-accent:#9184d9;
  --wzy-100:#f5f4ff; --wzy-200:#e7e5fe; --wzy-300:#d2cefd; --wzy-400:#b5abfc;
  --wzy-500:#968ae0; --wzy-600:#796cbf; --wzy-700:#5d5294; --wzy-800:#423a6a; --wzy-900:#2b2741;
  --wzy-n200:#e4e7f5; --wzy-n300:#cfd3e5; --wzy-n400:#b2b6ca;
  --wzy-n500:#9397ab; --wzy-n600:#75798c; --wzy-n700:#595d6c; --wzy-n800:#3f424d; --wzy-n900:#292b31;

  /* 앱이 이미 쓰는 변수들을 위 램프로 다시 묶는다.
     라이트에서 흐린 글씨는 반드시 어두운 단계(n600/n700, accent-600/700)를 쓴다 —
     500단계는 흰 배경에서 대비가 모자란다(SPEC). */
  --ink:var(--wzy-n900);
  /* n600(#75798c)은 흰 배경에서 4.31:1 로 AA(4.5) 에 못 미친다 — 실측했다.
     SPEC 도 "라이트에서 흐린 텍스트는 neutral-700 이상"이라 못박았으므로 한 단계 올린다(6.55:1). */
  --muted:var(--wzy-n700);
  --muted-strong:var(--wzy-n800);
  --line:rgba(145,132,217,.28);
  --line-strong:rgba(145,132,217,.42);
  --gold:var(--wzy-600);
  --bg:#ffffff;
  --panel:rgba(255,255,255,.72);
  --panel-strong:#ffffff;
  --surface-soft:var(--wzy-100);
  --surface-soft-2:#faf8ff;
  --accent:var(--wzy-accent);
  --accent-2:var(--wzy-500);
  --accent-3:var(--wzy-300);
  --accent-deep:var(--wzy-700);
  --accent-glow:rgba(145,132,217,.26);
  --accent-glow-strong:rgba(145,132,217,.38);
  --shadow-soft:0 14px 34px rgba(89,80,150,.10);
  --shadow-md:0 18px 42px rgba(89,80,150,.13);
  --shadow-lg:0 26px 58px rgba(89,80,150,.16);
  /* 채운 버튼용. 아래 아웃라인 규칙이 대부분을 덮지만 남는 자리를 위해 단색으로 눅인다. */
  --hero-gradient:linear-gradient(135deg,#796cbf 0%,#9184d9 100%);
  --soft-gradient:linear-gradient(180deg,#ffffff,var(--wzy-100));

  /* 개편안 전용 토큰 */
  /* 라이트 그라운드 — 퍼플 라디얼 오브제 제거(사용자 요청). 흰 종이 결만 남긴다. */
  /* 배경을 평평하게 (2026-08-01, 사용자 요청: 배경과 경계 없도록).
     #faf8ff → #ffffff 48% 그라디언트라 그 전환선이 히어로 아래 상자 모서리처럼 보였다.
     타로 첫 화면은 단색 흰 바탕이라 경계가 아예 없다 — 같은 결로 맞춘다. */
  --wzy-ground:#ffffff;
  --wzy-veil:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.28));
  --wzy-edge:rgba(145,132,217,.18);
  --wzy-nebula:
    radial-gradient(46% 34% at 62% 30%, rgba(150,138,224,.16) 0%, rgba(150,138,224,0) 70%),
    radial-gradient(38% 30% at 26% 66%, rgba(181,171,252,.14) 0%, rgba(181,171,252,0) 72%);
  --wzy-star-a:#8f83d6; --wzy-star-b:#a79ce8; --wzy-star-c:#b9b0f0; --wzy-star-d:#9a8de0;
  /* 라이트에서는 히어로 별을 끈다(사용자 요청) — 성운(::before)만 남는다. 다크는 .75 유지 */
  --wzy-star-op:0;
  --wzy-lead:var(--wzy-700);           /* 보조 안내 문구·라벨 */
  --wzy-card:rgba(255,255,255,.7);
  --wzy-card-edge:rgba(145,132,217,.22);
  --wzy-answer:linear-gradient(135deg,#f1eeff,#fbfaff);
  --wzy-answer-edge:rgba(145,132,217,.28);
  --wzy-rule-soft:rgba(145,132,217,.18);
  --wzy-chip:rgba(145,132,217,.14);
  --wzy-sel:rgba(145,132,217,.16);
  --wzy-mark:var(--wzy-600);           /* 본괘 효 */
  --wzy-mark-alt:var(--wzy-400);       /* 변괘 효 — 한 단계 흐리게(SPEC) */
}

body.dark-mode{
  --ink:#e9e9ed;
  --muted:var(--wzy-n400);
  --muted-strong:var(--wzy-n300);
  --line:rgba(145,132,217,.24);
  --line-strong:rgba(145,132,217,.4);
  --gold:var(--wzy-400);
  --bg:#161826;
  --panel:rgba(35,37,50,.72);
  --panel-strong:rgba(35,37,50,.92);
  --surface-soft:#1d1f33;
  --surface-soft-2:#232536;
  --accent:var(--wzy-accent);
  --accent-2:var(--wzy-400);
  --accent-3:var(--wzy-300);
  --accent-deep:var(--wzy-300);
  --hero-gradient:linear-gradient(135deg,#5d5294 0%,#9184d9 100%);
  --soft-gradient:linear-gradient(180deg,rgba(35,37,50,.9),rgba(22,24,38,.9));
  --wzy-ground:
    radial-gradient(140% 38% at 50% -13%, #322c55 0%, rgba(50,44,85,0) 70%),
    linear-gradient(180deg,#171930 0%,#161826 48%);
  --wzy-veil:linear-gradient(180deg,rgba(66,58,106,.34),rgba(35,37,50,.18));
  --wzy-edge:rgba(145,132,217,.24);
  /* 다크에서 .3 은 오른쪽 위에 렌즈 플레어처럼 밝은 점을 남겼다 — 눅이고 더 퍼뜨린다 */
  --wzy-nebula:
    radial-gradient(62% 48% at 62% 30%, rgba(150,138,224,.17) 0%, rgba(150,138,224,0) 76%),
    radial-gradient(54% 42% at 26% 66%, rgba(89,80,150,.20) 0%, rgba(89,80,150,0) 78%);
  --wzy-star-a:#e7e5fe; --wzy-star-b:#b5abfc; --wzy-star-c:#cfd3e5; --wzy-star-d:#d2cefd;
  --wzy-star-op:.75;
  --wzy-lead:var(--wzy-300);
  --wzy-card:rgba(35,37,50,.6);
  --wzy-card-edge:#292b31;
  --wzy-answer:rgba(66,58,106,.28);
  --wzy-answer-edge:var(--wzy-800);
  --wzy-rule-soft:#292b31;
  --wzy-chip:rgba(66,58,106,.6);
  --wzy-mark:var(--wzy-400);
  --wzy-mark-alt:var(--wzy-500);
}

/* 그라운드. 기존 body 배경이 !important 로 박혀 있어 같은 무기를 쓴다. */
body, body.dark-mode{ background:var(--wzy-ground) !important; background-attachment:fixed !important; }

/* 채운 그라데이션 버튼을 1px 아웃라인으로 (SPEC 1) — 그라데이션은 배경에서만 쓴다.
   화면에 채운 색이 여럿이면 무엇이 주 행동인지 흐려진다. */
#mode-random .btn.primary,
#timeNow, #manualMake, #saveBtn, #copyPromptBtn,
.btn.primary, .seg button.active, .textTabs .btn.active, .scriptToggleBtn.active,
body.dark-mode #mode-random .btn.primary,
body.dark-mode #timeNow, body.dark-mode #manualMake,
body.dark-mode #saveBtn, body.dark-mode #copyPromptBtn,
body.dark-mode .btn.primary, body.dark-mode .seg button.active,
body.dark-mode .textTabs .btn.active, body.dark-mode .scriptToggleBtn.active{
  background:transparent !important;
  color:var(--wzy-lead) !important;
  border:1px solid var(--accent) !important;
  box-shadow:none !important;
  transition:background .18s;
}
#mode-random .btn.primary:hover, .btn.primary:hover,
.seg button.active:hover, .textTabs .btn.active:hover{ background:rgba(145,132,217,.12) !important; }
#mode-random .btn.primary:active, .btn.primary:active{ background:rgba(145,132,217,.22) !important; }
/* 선택된 세그먼트는 옅은 면으로만 구분 */
.seg button.active, .textTabs .btn.active, .scriptToggleBtn.active{ background:var(--wzy-sel) !important; }

/* 알약·태그를 한 색으로 (SPEC 4 — 배지 남발 축소) */
.chip, #codeBadge, .autoTag, .todayFortunePill, .reasonImpact, .metaLine .pill,
body.dark-mode .chip, body.dark-mode #codeBadge, body.dark-mode .autoTag{
  background:var(--wzy-chip) !important;
  border-color:var(--line) !important;
  color:var(--wzy-lead) !important;
  font-size:9.5px !important;
}
/* 길흉 색은 남긴다 — 뜻을 나르는 색이라 톤 통일보다 우선한다 */
.autoTag.good{ background:rgba(108,150,200,.14) !important; border-color:rgba(108,150,200,.4) !important; color:#2f5f9e !important; }
.autoTag.bad { background:rgba(200,90,90,.13)  !important; border-color:rgba(200,90,90,.38)  !important; color:#8d2f2f !important; }
body.dark-mode .autoTag.good{ color:#a8c8f0 !important; }
body.dark-mode .autoTag.bad { color:#f0a9a9 !important; }

/* 괘 효 획 색 — 정통 배치표도 같은 램프로 */
.hline .solid, .hline .left, .hline .right{ background:var(--wzy-mark) !important; }
.hline.moving .solid, .hline.moving .left, .hline.moving .right{ background:var(--accent) !important; }
.arrow{ color:var(--wzy-mark) !important; }

/* ── 2) 구조 — 짝 JS 가 붙은 뒤에만 ─────────────────────── */

/* 히어로 — 타로 첫화면과 같은 결로 (2026-07-31, 사용자 요청).
   ★ 타로의 히어로에는 **판이 없다.** 배경 위에 곧바로 ✦ · 눈썹 · 제목이 가운데로 서고
     면·테두리·블러가 하나도 없다(실측: 배경 rgba(0,0,0,0) · 테두리 0px none · 패딩 34px 0 0).
     여기 있던 반투명 베일과 아래만 둥근 모서리를 걷어 같은 자리에 세운다.
   성운·별(::before/::after)은 남긴다 — 그건 판이 아니라 배경이고 타로도 페이지에 깔고 있다. */
html.wzy-on .wzyHero{
  position:relative; overflow:hidden; text-align:center;
  padding:18px 20px 10px;   /* 30/18 → 18/10 (2026-09-08 v0.7.2, 첫 화면이 한 페이지에 들어가게) */
  /* 좌우로 빼내던 것(셸 패딩 상쇄)을 걷었다 — 면을 없앤 순간 가장자리까지 끌 이유가 사라졌고,
     실측으로 폭이 398px 이 되어 384px 화면에서 7px 가로 넘침이 났다. 위만 끌어올린다. */
  margin:calc(-1 * var(--wzy-shell-pad, 14px)) 0 10px;
  background:none;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  border-bottom:0;
  border-radius:0;
}
html.wzy-on .wzyHero::before{
  content:''; position:absolute; inset:-20% -14%; pointer-events:none;
  background:var(--wzy-nebula); animation:wzyDrift2 120s linear infinite alternate;
}
html.wzy-on .wzyHero::after{
  content:''; position:absolute; inset:-10%; pointer-events:none; opacity:var(--wzy-star-op);
  background-image:
    radial-gradient(1.3px 1.3px at 14% 24%,var(--wzy-star-a) 50%,transparent 51%),
    radial-gradient(1px 1px at 33% 12%,var(--wzy-star-b) 50%,transparent 51%),
    radial-gradient(1px 1px at 52% 34%,var(--wzy-star-c) 50%,transparent 51%),
    radial-gradient(1.4px 1.4px at 71% 18%,var(--wzy-star-d) 50%,transparent 51%),
    radial-gradient(1px 1px at 86% 44%,var(--wzy-star-b) 50%,transparent 51%);
  animation:wzyDrift 150s linear infinite alternate, wzyTwk 9s ease-in-out infinite;
}
html.wzy-on .wzyHero > *{ position:relative }
/* 라이트에서 히어로 별을 끈다(사용자 요청). opacity:0(--wzy-star-op) 은 wzyTwk 애니메이션이
   매 프레임 덮어써 통하지 않아 ::after 자체를 걷는다 — 성운(::before)은 그대로 둔다.
   6ix 테마는 body.dark-mode 로 스위칭하므로 라이트 = body:not(.dark-mode). */
html.wzy-on body:not(.dark-mode) .wzyHero::after,
html.wzy-on body:not(.dark-mode) .wzyHero::before{ display:none !important }
@keyframes wzyDrift { from{transform:translate3d(0,0,0)} to{transform:translate3d(-34px,12px,0)} }
@keyframes wzyDrift2{ from{transform:translate3d(0,0,0)} to{transform:translate3d(26px,-10px,0)} }
@keyframes wzyTwk  { 0%,100%{opacity:.28} 50%{opacity:.85} }
@media (prefers-reduced-motion: reduce){
  html.wzy-on .wzyHero::before, html.wzy-on .wzyHero::after{ animation:none !important }
}

/* 눈썹·제목의 크기와 자간을 타로 첫화면에서 재 온 값으로 맞춘다 (2026-07-31).
   실측 — 눈썹 13px/자간 5.46px(=.42em)/보라, 제목 34px/700/기본 자간/잉크색. */
html.wzy-on .wzyKicker{
  font-size:13px; letter-spacing:.42em; text-transform:uppercase;
  color:var(--wzy-lead); margin:0 0 10px;
}
/* ★ font-size 에 !important 가 필요하다. 15-v141-mobile-result-flow.css 의
   `.brand h1{font-size:24px !important}`(≤620px)가 id 선택자보다 세다 —
   important 없는 규칙은 특정도와 무관하게 진다. 실측으로 24px 로 눌려 있었다. */
html.wzy-on .wzyHero h1#appTitle{
  margin:0 0 12px; line-height:1.25; font-weight:700;
  letter-spacing:normal; color:var(--ink); text-wrap:balance;
}
@media (max-width:380px){
  /* 34px 은 좁은 폰에서 '우주 육효'가 아슬아슬하다 — 한 단만 내린다 */
  html.wzy-on .wzyKicker{ font-size:11.5px; letter-spacing:.34em }
}
/* 부제는 h1 이 이미 같은 말을 한다 */
html.wzy-on .wzyHero .brand p{ display:none }

/* 일시·사주 줄 — 칩(면+테두리)을 걷고 글로만 둔다 (2026-07-31, 사용자 요청).
   히어로에서 판을 걷었는데 그 안에 또 판이 있으면 걷어낸 뜻이 없어진다.
   타로도 제목 아래를 설명 글 두 줄로만 두고 아무 상자도 씌우지 않는다(실측).
   [?] 버튼은 마크업에서 빠졌으므로(01-core-engine.js) 그 규칙도 함께 지웠다. */
html.wzy-on .wzyHero #liveClock{
  display:inline-flex !important; flex-direction:column !important;
  align-items:center !important; gap:3px !important;
  width:auto !important; max-width:100% !important;
  margin:2px 0 0 !important; padding:0 !important;
  border-radius:0 !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  animation:none !important;      /* 기존 timePulse 반짝임을 끈다 — 히어로가 이미 움직인다 */
  font-weight:400 !important; color:var(--ink) !important;
}
html.wzy-on .wzyHero #liveClock:after{ display:none !important }
/* 날짜가 먼저 읽히고 사주 네 기둥이 그 아래로 — 전에는 둘 다 11px 이라 평평했다 */
html.wzy-on .wzyHero #liveClock .clockMain{
  font-size:14px; font-weight:400; color:var(--muted-strong); letter-spacing:-.01em;
}
html.wzy-on .wzyHero #liveClock .clockSub{
  display:inline-flex; align-items:center; justify-content:center;
  gap:6px; width:auto; min-width:0;
}
/* 네 기둥은 이 화면에서 유일한 '자료'다 — 날짜보다 한 단 세우고 자간을 벌려 읽히게 한다 */
html.wzy-on .wzyHero #liveClock .clockSubText{
  font-size:13.5px; font-weight:600; color:var(--ink);
  letter-spacing:.06em; flex:0 1 auto; line-height:1.5; word-break:keep-all;
}

/* 상단바 — 좌측은 비운다. 위쪽 허브 바(#wz-bar)가 뒤로가기와 서비스 이름을 이미 맡는다. */
html.wzy-on .top{
  padding:8px 4px 2px !important; min-height:0 !important;
  display:flex; align-items:center; justify-content:flex-end;
}
html.wzy-on .top .brand{ display:none }

/* 폼 라벨.
   '무엇이 궁금한가요?'는 원래 15px/800 굵은 제목(.questionSetupHead b)이었고,
   flex + 밑줄까지 있어 첫 글자 '무'가 잘려 보인다는 지적을 받았다.
   시안은 이 자리를 10.5px 조용한 라벨로 쓴다 — 굵은 제목을 라벨로 낮추면
   잘림도 사라지고 시안과도 맞는다. flex 를 block 으로 되돌려 잘릴 여지를 없앤다. */
/* ★ 10.5px/400 회색은 너무 조용해 구역이 안 나뉘었다 (2026-08-02, 사용자 지적).
   '무엇이 궁금한가요?'와 '작괘 방식'은 입력 화면을 나누는 두 구역의 제목이다.
   선이나 상자를 다시 넣지 않고 글자 계단만으로 나눈다:
     구역 제목 14px/700 본문색  >  칸 라벨 12px/600 회색  >  배지 10.5px
   잘림(첫 글자 '무')은 크기가 아니라 flex+밑줄 탓이었으므로
   block·overflow:visible·border-bottom:0 은 그대로 둔다. */
html.wzy-on .wzyLabel,
html.wzy-on .questionSetupHead{
  display:block !important;
  font-size:14px !important; letter-spacing:-.01em; color:var(--ink) !important;
  margin-bottom:10px !important; font-weight:700 !important; line-height:1.45 !important;
  border-bottom:0 !important; padding-bottom:0 !important; overflow:visible !important;
}
html.wzy-on .questionSetupHead b{
  font-size:14px !important; font-weight:700 !important;
  letter-spacing:-.01em; color:var(--ink) !important;
}
/* 구역 사이 숨 — 제목이 앞 칸에 붙어 보이지 않게 위쪽 여백을 넉넉히 준다 */
html.wzy-on .wzyModes{ margin-top:26px !important }
html.wzy-on .questionSetupHead span{ display:none }

/* 용신 기준 행 — 시안의 .picker 와 같은 결 */
html.wzy-on #v176CategorySummary{
  width:100%; margin-top:10px; display:flex; align-items:center; gap:10px;
  padding:13px; text-align:left; cursor:pointer;
  background:var(--panel) !important; border:1px solid var(--line-strong) !important;
  border-radius:10px !important; box-shadow:none !important;
}
html.wzy-on #v176CategorySummary:hover{ border-color:var(--wzy-600) !important }
html.wzy-on #v176CategorySummary .v176SummaryLabel{ font-size:11px; color:var(--muted-strong) }
html.wzy-on #v176CategorySummary .v176SummaryValue{ flex:1; font-size:13px; font-weight:400; color:var(--ink) }
html.wzy-on #v176CategorySummary .v176SummaryArrow{ font-size:12px; color:var(--wzy-mark) }
/* 라벨이 버튼 위에 한 번 더 나오던 것을 감춘다 — 버튼 안에 이미 있다 */
html.wzy-on .categoryField > .catLabel{ display:none }

/* 시트가 화면보다 길어지면 스크롤한다.
   원래 overflow:hidden 이라 그룹을 골라 세부 칩이 늘어나면 '적용 중'과 '선택 완료'가
   잘려 나가고 스크롤도 안 됐다 — 짧은 화면에서 용신을 아예 고를 수 없는 상태였다. */
html.wzy-on #v176CategoryOverlay .v176CategorySheet{
  max-height:88dvh !important; overflow-y:auto !important;
  -webkit-overflow-scrolling:touch;
}

/* 홀로 남은 대시, 담을 것 없는 서랍은 감춘다 */
html.wzy-on #lineage.wzyEmpty,
html.wzy-on .wzyFold.wzyEmpty{ display:none !important }

/* 결과 상단바를 3등분해 '결과'가 진짜 가운데에 오게 한다.
   space-between 으로 두니 오른쪽 묶음(복사·한자 보기)이 넓어 가운데가 왼쪽으로 치우쳤다. */
html.wzy-on .resultNav{
  display:grid !important; grid-template-columns:1fr auto 1fr; align-items:center;
}
html.wzy-on .resultNav .newCastBtn{ justify-self:start; min-height:0 !important }
html.wzy-on .resultNavTitle{ justify-self:center; text-align:center }
html.wzy-on .resultNav .v176ResultActions{ justify-self:end; display:flex; align-items:center }

/* 용신 시트 — 오버레이는 #v176CategoryOverlay 이고, 안의 그룹 타일·세부 칩·'적용 중' 줄은
   js/12-v122-enhance.js 가 만든 .v122pick / .v122gt / .v122chip / .v122cur 다.
   새로 만들 것이 없다 — 3열 텍스트 칩으로 톤만 맞추고 이모지를 뺀다(SPEC 7). */
html.wzy-on #v176CategoryOverlay .v176CategorySheet{
  background:var(--panel-strong) !important; border-radius:18px 18px 0 0 !important;
  border-top:1px solid rgba(145,132,217,.3) !important;
}
html.wzy-on #v176CategoryOverlay #v176CategoryTitle{ font-size:15px; font-weight:600 }
html.wzy-on #v176CategoryOverlay .v176SheetHead small{ font-size:11px; color:var(--muted) }
/* ── 주제 고르는 칸 (2026-08-04 교체) ──────────────────────────────────
   시안 규격으로 갈아 끼웠다. 덮는 규칙을 얹지 않고 이 자리를 바꾼다 —
   층을 더 쌓으면 로딩 순서에 따라 옛 모습이 스친다(사용자 지적).
   ★ 큰 묶음은 세 칸. 넷이면 '만남·연락·방문' 같은 이름이 잘린다.
   ★ 세부 알약은 줄바꿈으로 흐르게 둔다 — 격자로 묶으면 짧은 이름 옆이 비어 성글다. */
/* (걷어냄) 옛 갈래 격자 — 두 걸음으로 바뀌며 이 요소를 만들지 않는다 (2026-08-04) */
html.wzy-on .v122subs{ display:flex !important; flex-wrap:wrap !important; gap:6px !important }
/* (걷어냄) 옛 갈래 격자 — 두 걸음으로 바뀌며 이 요소를 만들지 않는다 (2026-08-04) */
html.wzy-on .v122chip{
  cursor:pointer; font-family:inherit; white-space:nowrap;
  display:inline-flex !important; align-items:center !important;
  padding:7px 13px !important; border-radius:999px !important;
  font-size:13px !important; font-weight:600 !important; white-space:nowrap;
  border:1px solid rgba(145,132,217,.28) !important;
  background:var(--panel-strong) !important; color:var(--ink) !important; box-shadow:none !important;
}
html.wzy-on .v122gt:hover, html.wzy-on .v122chip:hover{ border-color:#6d5ae6 !important }
/* 고른 것 — 큰 묶음은 옅은 면, 세부는 꽉 찬 면. 시안의 주제 칩과 같은 규격이다.
   묶음까지 꽉 채우면 화면에 보라 덩어리가 둘이 되어 무엇을 고른 것인지 흐려진다. */
/* (걷어냄) 옛 갈래 격자 — 두 걸음으로 바뀌며 이 요소를 만들지 않는다 (2026-08-04) */
html.wzy-on .v122chip.active{
  background:#6d5ae6 !important; border-color:#6d5ae6 !important;
  color:#fff !important; font-weight:700 !important;
}
/* (걷어냄) 옛 갈래 격자 — 두 걸음으로 바뀌며 이 요소를 만들지 않는다 (2026-08-04) */
/* '선택 완료'는 이 시트에서 마지막에 누르는 것이다 — 면을 칠해 주 단추로 세운다
   (2026-08-04, 사용자 지적: 테두리만이라 눌러야 할 것으로 안 보이고 색 배치가 애매함).
   전에는 아웃라인 통일안(SPEC 1)을 따랐는데, 시트 안에 테두리 단추가 열 줄 넘게 늘어서면서
   마지막 한 걸음이 그 줄들과 구별되지 않았다. */
html.wzy-on #v176CategoryDone{
  background:#6d5ae6 !important; color:#fff !important;
  border:1px solid #6d5ae6 !important; box-shadow:none !important;
  font-weight:700 !important;
}
html.wzy-on #v176CategoryDone:hover{ filter:brightness(1.06) }

/* 시트 안에 카드가 연달아 셋(세부 안내 · 적용 중 · 용신 상세) 쌓여 답답했다.
   용신 상세는 '적용 중' 줄과 같은 말을 다른 옷으로 반복하므로 껍데기를 벗겨 한 겹으로 만든다. */
html.wzy-on #v141YongsinDetail{
  background:transparent !important; border:0 !important; box-shadow:none !important;
  padding:10px 2px 0 !important; margin:0 !important;
}

/* 용신 이모지 되살림(사용자 요청) — 개편 때 SPEC 7 로 감췄더니 열 개 항목이
   글자만 늘어서 훑어 고르기가 어려웠다. 칸을 잡아먹지 않게 작은 글리프로만 둔다. */
/* (걷어냄) 옛 갈래 격자 — 두 걸음으로 바뀌며 이 요소를 만들지 않는다 (2026-08-04) */
/* '적용 중 · …' 줄을 시안의 적용 노트 모양으로 */
html.wzy-on .v122cur{
  margin-top:14px !important; padding:12px !important; border-radius:10px !important;
  background:var(--surface-soft) !important; border:1px solid rgba(145,132,217,.24) !important;
  font-size:11.5px !important; line-height:1.65 !important; color:var(--muted-strong) !important;
}
html.wzy-on body.dark-mode .v122cur{ background:rgba(66,58,106,.28) !important }
html.wzy-on .v122cur b{ color:var(--wzy-lead) !important; font-weight:600 !important }

/* 작괘 방식 3버튼 */
html.wzy-on .wzyModes{ margin-top:18px }
html.wzy-on .wzyModeRow{ display:flex; gap:6px }
html.wzy-on .wzyModeRow button{
  flex:1; padding:11px 0; font:500 12.5px var(--font-ui);
  color:var(--wzy-lead); background:transparent;
  border:1px solid rgba(145,132,217,.4); border-radius:10px; cursor:pointer;
  transition:background .18s, border-color .18s;
}
html.wzy-on .wzyModeRow button:hover{ border-color:var(--wzy-600) }
html.wzy-on .wzyModeRow button[aria-pressed="true"]{ background:var(--wzy-sel); border-color:var(--accent) }
html.wzy-on .wzyModeHint{ margin-top:9px; font-size:11.5px; line-height:1.6; color:var(--muted) }
html.wzy-on .wzyModeHint:empty{ display:none }
/* 원래의 '다른 작괘 방식' 토글은 3버튼이 대신한다 */
html.wzy-on #v176AdvancedToggle{ display:none !important }

/* 상황 메모 접힘 규칙(SPEC 6)은 걷었다 (2026-08-02) — 이제 접지 않고 펼쳐 둔다.
   접혀 있으면 있는 줄도 모르고 지나가 아무도 안 적고, 그러면 AI 가 배경 없이
   일반적인 말밖에 못 한다. 접어서 아낀 세로 한 줄보다 그쪽 손해가 크다. */

/* 작괘 버튼이 안내 문구보다 위 (시안 순서).
   flex + order 로 하려 했지만 css/20 의 가시성 게이트
   (body.app-view-input:not(.v176-advanced-open) .inputPage > #mode-random{display:block!important})
   가 특이도에서 이겨 통하지 않았다. 그래서 순서는 짝 JS 가 DOM 을 실제로 옮겨 맞춘다. */
html.wzy-on #mode-random .row{ margin-top:18px }
/* 두 줄짜리 안내가 됐다 (2026-08-02, 사용자 요청: 센터정렬 + 자연스러운 줄바꿈).
   ★ word-break:keep-all — 한글 단어를 글자 단위로 자르지 않는다.
   ★ text-wrap:balance — 줄 길이를 고르게 나눠 '괘를 뽑은 그 / 시각의 일진이' 같은
     어색한 끊김을 없앤다.
   ★ max-width:24em — 한 줄이 너무 길면 balance 도 손쓸 곳이 없다. */
html.wzy-on #mode-random .castLeadHint{
  margin:9px auto 0 !important; max-width:24em;
  text-align:center; text-wrap:balance; word-break:keep-all;
  font-size:11.5px !important; line-height:1.7 !important; color:var(--muted) !important;
}

/* 하단 탭바 */
html.wzy-on #v122nav button{
  font-size:10.5px !important; color:var(--muted) !important;
  background:transparent !important; border:0 !important;
}
html.wzy-on #v122nav button.active{
  color:var(--wzy-lead) !important;
  border-bottom:1.5px solid var(--wzy-mark) !important;
}

/* ── 데스크톱 프레이밍 ─────────────────────────────────
   이 앱은 v176 이후 모바일 한 화면을 전제로 자랐다(css/20 의 미디어 쿼리가 620px 기준).
   그런데 .shell 은 max-width:1180px 이고 하단 탭바는 position:fixed; left:0; right:0 이라
   넓은 화면에서 콘텐츠는 640px 컬럼에 모여 있는데 탭바만 1385px 로 뻗어 화면이 갈라졌다.
   개편안이 430px 한 컬럼 규격이므로 앱 전체를 그 폭으로 모은다 — 인덱스와 같은 프레임이다. */
/* ── 반응형 사다리 (SPEC §반응형) ─────────────────────────
   데스크톱에서도 단일 컬럼을 유지한다 — 점술 흐름은 한 줄 읽기가 맞다.
   폭이 커질 때 늘어나는 것은 컬럼 폭·여백·타입·카드 크기이고 정보 구조는 그대로다.
     ~559: 100%(최대 430) · 560+: 560 · 900+: 760 · 1200+: 860
   --wz-col 은 허브 바가 글자를 그 폭에 맞춰 들여쓰는 데 쓴다. */
html.wzy-on{ --wz-col:430px; --wzy-shell-pad:14px; }
html.wzy-on .shell{ margin:0 auto !important }
html.wzy-on .layout{ grid-template-columns:1fr !important }
html.wzy-on #v122nav{
  left:50% !important; right:auto !important;
  width:min(var(--wz-col), 100%) !important; transform:translateX(-50%);
}
@media (min-width:560px){
  html.wzy-on{ --wz-col:560px; --wzy-shell-pad:18px }
}
@media (min-width:900px){
  html.wzy-on{ --wz-col:760px; --wzy-shell-pad:24px }
  /* 4칸 요약이 넓은 화면에서 한 줄로, 용신 시트 칩이 5열로 (SPEC 900+ 표).
     기본 규칙이 !important 라 여기도 !important 로 이겨야 한다. */
  html.wzy-on .v161StoryGrid{ grid-template-columns:repeat(4,1fr) !important }
  /* 넓은 화면에서도 세 칸을 지킨다 — 다섯 칸이면 이름이 잘린다 (2026-08-04) */
/* (걷어냄) 옛 갈래 격자 — 두 걸음으로 바뀌며 이 요소를 만들지 않는다 (2026-08-04) */
}
@media (min-width:900px){
  html.wzy-on{ --wz-col:860px; --wzy-shell-pad:24px }
}

/* 참고 지수 블록(.scoreReadout)은 앱에 다크 대응이 아예 없어 다크에서도 흰 카드로 나왔다.
   색도 청록(#315f78) 계열이라 보라 램프와 어긋난다 — 두 테마 모두 램프로 다시 칠한다.
   무지개 게이지(.scoreMeter)만 남긴다: 그건 뜻을 나르는 색이다. */
html.wzy-on .scoreReadout{
  background:var(--wzy-answer) !important; border-color:var(--wzy-answer-edge) !important;
}
html.wzy-on .scoreBadge{
  background:var(--wzy-600) !important; color:#fff !important;
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.12) !important;
}
html.wzy-on .scoreBandLabel{
  color:var(--wzy-lead) !important; background:var(--wzy-chip) !important;
  border-color:var(--line) !important;
}
html.wzy-on .scoreReadoutTitle b{ color:var(--ink) !important }
html.wzy-on .scoreReadoutTitle span,
html.wzy-on .scoreDesc{ color:var(--muted) !important }
html.wzy-on .scoreLegend span{
  background:var(--wzy-card) !important; border-color:var(--line) !important;
  color:var(--muted-strong) !important;
}
html.wzy-on .scoreLegend span.active{
  background:var(--wzy-sel) !important; border-color:var(--accent) !important;
  color:var(--ink) !important; box-shadow:none !important;
}
html.wzy-on .scoreMeterPin{ background:var(--ink) !important; box-shadow:0 0 0 2px var(--bg) !important }

/* 기록·설정 탭 화면은 position:fixed; inset:0 인 전체 화면이라 상단 허브 바 밑으로 깔린다.
   원래 padding-top 22px 로는 46px 바에 '기록 · 저장한 작괘' 제목이 가려진다 — 바 높이를 더한다.
   좌우도 컬럼 폭에 맞춰 들여써 본문과 같은 자리에 오게 한다. */
html.wzy-on #v122records.helpOverlay.show .helpDialog,
html.wzy-on #yilinBrowseOverlay.helpOverlay.show .helpDialog{
  padding-top:calc(18px + var(--wz-h, 46px)) !important;
  padding-left:max(16px, calc((100% - var(--wz-col)) / 2)) !important;
  padding-right:max(16px, calc((100% - var(--wz-col)) / 2)) !important;
}

/* 넓은 블록은 자기 안에서 가로로 스크롤한다 — 폰에서는 컬럼을 넓힐 수 없으니
   잘라 보이는 대신 밀어 볼 수 있게 한다. 페이지 자체는 절대 가로로 흐르지 않는다. */
html.wzy-on .tableWrap,
html.wzy-on .classicBoard,
html.wzy-on .scoreLegend,
html.wzy-on .wzyFoldBody{
  max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
}
html.wzy-on .scoreReadout{ max-width:100%; overflow:hidden }
/* 5구간 범례는 좁은 화면에서 한 줄씩 쌓는다 — 가로로 밀게 하면 놓치기 쉽다 */
@media (max-width:559.98px){
  html.wzy-on .scoreLegend{ grid-template-columns:1fr !important; overflow:visible }
  html.wzy-on .scoreLegend span{ text-align:left }
}

/* 결과도 껍데기 없이 위에서 아래로 한 겹 (SPEC 2) */
html.wzy-on .panel.result{
  background:transparent !important; border:0 !important; box-shadow:none !important;
  padding:0 !important;
}

/* 결과 상단 라벨은 '결과' 한 단어. 원래는 '결과 페이지' 뒤에 '다시 뽑으려면 새로 작괘'가
   붙어 있었는데, 그 안내는 바로 왼쪽 버튼이 이미 하고 있다. */
html.wzy-on .resultNavTitle > *:not(b){ display:none !important }

/* 카드 안 카드 중첩 제거 (SPEC 2) — 폼 패널의 겉껍데기를 없앤다.
   radius·overflow 도 같이 걷어야 한다(사용자 지적: '무엇이 궁금한가요?'의 '무'와
   패치노트 앞글자가 잘림). 앱 기본 .panel 이 border-radius:28px + overflow:hidden 인데,
   위에서 배경·테두리·패딩을 다 없애면 둥글릴 면은 사라지고 '보이지 않는 둥근 클립'만 남는다.
   패딩이 0 이라 글자가 모서리 곡선 안쪽에 놓이고, 그 곡선이 첫 글자를 먹었다 —
   패널이 투명하니 화면에는 이유가 안 보여서 글자만 잘린 것처럼 읽힌다.
   실측: '무' 가 left 9.0, 패널 좌측 경계도 9.0, radius 28px. */
html.wzy-on .layout > .panel.side{
  background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important;
  border-radius:0 !important; overflow:visible !important;
}
html.wzy-on #questionBox.questionSetup{
  background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important;
}
/* ★ 결과 패널에도 같은 처리를 한다 (2026-08-02, 사용자 지적: '한자 보기'의 끝 글자와
   맨 아래 각주의 '하세요' 가 잘린다). 입력 패널만 걷어 두고 결과 쪽을 빠뜨렸다.
   실측: #resultPanel overflow:hidden · border-radius:28px · padding:0 —
   보이지 않는 둥근 클립만 남아, 오른쪽 위(한자 보기 여유 4px)와
   왼쪽 아래(각주가 칸 바닥에서 2px)가 그 곡선에 먹혔다. */
html.wzy-on .layout > .panel.result{
  border-radius:0 !important; overflow:visible !important;
}

/* ── 결과 화면 ─────────────────────────────────────────── */

/* 용신은 제목 위 작은 라벨로. 오른쪽 칩 무리에 섞여 있으면 무엇의 기준인지 안 읽힌다. */
html.wzy-on .wzyYong{ font-size:10.5px; color:var(--wzy-lead); margin-bottom:8px }
html.wzy-on .head .chips{ display:none !important }
html.wzy-on .head{ border-bottom:0 !important; padding-bottom:0 !important; margin-bottom:14px !important }
html.wzy-on #mainName{ font-size:25px !important; line-height:1.3; font-weight:400 !important; letter-spacing:-.03em }
html.wzy-on #lineage{ font-size:11px !important; color:var(--muted) !important; margin-top:6px !important }

/* 판정 카드 — 등급 · 참고 점수 · 진행바 · 한 단락 (SPEC 3) */
html.wzy-on #v141ConclusionCard{
  margin:0 0 4px !important; padding:16px !important; border-radius:12px !important;
  background:var(--wzy-answer) !important; border:1px solid var(--wzy-answer-edge) !important;
  display:block !important;
}
html.wzy-on .v141FocusVerdict{ font-size:15px !important; font-weight:600 !important; color:var(--ink) !important }
html.wzy-on .v141ConclusionScore{ font-size:11px !important; color:var(--muted) !important }
/* 앱의 등급·점수 노드는 이 경로에서 자리표시자에 멈춘다(?wzy=off 로도 같다 — 앱 기존 동작).
   노드는 남겨 두고(앱의 갱신 경로를 살려 둔 채) 감추기만 하고, 짝 JS 가 채운 내 노드를 보여 준다. */
html.wzy-on .v141FocusVerdict,
html.wzy-on .v141ConclusionScore{ display:none !important }

html.wzy-on #v141ConclusionCard{ display:block !important }
html.wzy-on .wzyVerdictRow{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
}
html.wzy-on .wzyVerdict{ font-size:15px; font-weight:600; color:var(--ink) }
html.wzy-on .wzyScore{ font-size:11px; color:var(--muted); white-space:nowrap }
html.wzy-on .wzyBar{
  margin-top:10px;
  height:4px; border-radius:2px; background:rgba(145,132,217,.2); overflow:hidden;
}
html.wzy-on .wzyVerdictText:empty{ display:none }
/* 채울 값이 하나도 없을 때는 카드째 감춘다 — 빈 캡슐만 남으면 고장으로 읽힌다 */
html.wzy-on #v141ConclusionCard.wzyEmpty{ display:none !important }
html.wzy-on .wzyBar > i{ display:block; height:100%; width:var(--wzy-score,0%); background:var(--wzy-500) }
html.wzy-on .wzyVerdictText{
  margin:12px 0 0 !important; font-size:13px !important; line-height:1.75 !important;
  color:var(--ink) !important; text-wrap:pretty;
}
html.wzy-on .v141ConclusionHint{ display:none !important }

/* 본괘 → 변괘 간이 괘쌍. 정통 배치표는 접힌 아코디언에 남기고, 답 다음으로 보고 싶은
   괘 모양만 여기서 크게 보여 준다. 효는 위에서 아래로 6줄, 양은 이어진 획, 음은 두 조각. */
html.wzy-on .wzyGuaPair{
  display:flex; gap:22px; justify-content:center; padding:22px 0 4px;
  /* 위를 맞춘다(center 가 아니라). 본괘에는 아래에 '● 동효' 범례가 붙고 변괘에는 없어서,
     가운데 정렬이면 두 괘의 효 줄이 어긋난다 — 실제로 변괘가 한 칸 낮게 나왔다.
     효 줄부터 맞추는 게 맞으니 상단 정렬로 바꾸고, 화살표만 효 높이에 맞춰 내린다. */
  align-items:flex-start;
  /* ★ #resultPanel 은 flex column 이고 블록마다 order 가 박혀 있다
     (.resultNav -90, .head -60, #v141ConclusionCard -50, #autoPanel -30 …).
     DOM 에서 판정 카드 앞에 넣어도 order 가 없으면 0 으로 취급돼 음수들 뒤, 즉 맨 아래로 밀린다.
     실제로 그래서 괘쌍이 화면 맨 아래에 나왔다 — 형제 순서만 보고 화면 위치를 재지 않아 놓쳤다.
     -55 는 .head(-60)와 판정 카드(-50) 사이다. */
  order:-55;
}
html.wzy-on .wzyGua{ text-align:center }
html.wzy-on .wzyGua .wzyLines{ display:grid; gap:5px; width:58px }
html.wzy-on .wzyGua .wzyLines > div{ height:5px; position:relative }
html.wzy-on .wzyGua .wzyYang{ height:5px; border-radius:2px; background:var(--wzy-mark) }
html.wzy-on .wzyGua .wzyYin{ display:flex; gap:7px; height:5px }
html.wzy-on .wzyGua .wzyYin > i{ flex:1; height:5px; border-radius:2px; background:var(--wzy-mark) }
html.wzy-on .wzyGua.alt .wzyYang{ background:var(--wzy-mark-alt) }
html.wzy-on .wzyGua.alt .wzyYin > i{ background:var(--wzy-mark-alt) }
/* 동효는 오른쪽 4px 점. 한자 動 은 인접 동효에서 겹쳐 쓰지 않는다(SPEC). */
html.wzy-on .wzyGua .wzyDong::after{
  content:''; position:absolute; right:-11px; top:.5px;
  width:4px; height:4px; border-radius:50%; background:var(--accent);
}
html.wzy-on .wzyGua .wzyCap{ font-size:11px; color:var(--muted-strong); margin-top:9px }
html.wzy-on .wzyLegend{ display:flex; align-items:center; justify-content:center; gap:5px; margin-top:4px }
html.wzy-on .wzyLegend i{ width:4px; height:4px; border-radius:50%; background:var(--accent) }
html.wzy-on .wzyLegend span{ font-size:9.5px; color:var(--muted) }
/* 화살표는 효 6줄의 세로 가운데에 온다. 효 한 줄 5px + gap 5px = 55px, 그 절반이 약 27px.
   상단 정렬이라 화살표를 그만큼 내려 두 괘 사이 가운데를 가리키게 한다. */
html.wzy-on .wzyArrow{ font-size:15px; color:var(--wzy-mark); margin-top:22px }

/* '괘를 쉬운 말로' 네 항목을 2×2 로. 세로로 쌓이면 스크롤만 길어진다. */
html.wzy-on .wzySectionLabel{
  font-size:10.5px; letter-spacing:.06em; color:var(--muted-strong); margin:22px 0 12px;
}
html.wzy-on .v161StoryHead{ display:none !important }
html.wzy-on .v161StoryGrid{
  display:grid !important; grid-template-columns:1fr 1fr !important; gap:9px !important;
}
/* 각 칸 앞의 번호 배지(<em>1</em>)를 뺀다. 흰 글씨라 이 카드 위에서 보이지 않았고
   (대비 1.0 으로 측정됐다), 시안의 4칸도 제목+본문 둘만 둔다(SPEC 4).
   ★ 배지를 display:none 으로만 감추면 안 된다 — 칸(article)이 grid(26px 1fr)라
   배지가 빠진 자리에 본문이 26px 첫 칸으로 밀려 한 글자씩 줄바꿈됐다. 실제로 그렇게 깨졌다.
   그래서 칸을 block 으로 되돌려 본문이 폭을 다 쓰게 한다. */
html.wzy-on .v161StoryGrid > * > em{ display:none !important }
html.wzy-on .v161StoryGrid > *{
  display:block !important;
  padding:13px !important; border-radius:11px !important;
  background:var(--wzy-card) !important; border:1px solid var(--wzy-card-edge) !important;
  font-size:11.5px !important; line-height:1.6 !important; color:var(--ink) !important;
}
@media (max-width:359px){ html.wzy-on .v161StoryGrid{ grid-template-columns:1fr !important } }

/* 접히는 근거들을 한 결로 — 위아래 1px 선만 두고 +/− 로 여닫는다.
   대상은 앱의 <details> 자체다(옮기지 않고 제자리에서 옷만 갈아입힌다). */
html.wzy-on .wzyFold{
  padding:12px 0 !important; margin:0 !important;
  border:0 !important; border-top:1px solid var(--wzy-rule-soft) !important;
  background:transparent !important; box-shadow:none !important; border-radius:0 !important;
}
html.wzy-on .wzyFold:last-of-type{ border-bottom:1px solid var(--wzy-rule-soft) !important }
/* 전통 괘상 풀이는 버튼 + 패널 구조라 버튼 줄을 같은 결로 만든다 */
html.wzy-on .wzyFoldRow{
  display:block !important; padding:0 !important; margin:0 !important;
  border-top:1px solid var(--wzy-rule-soft);
}
html.wzy-on .wzyFoldRow .btn{
  width:100%; display:flex !important; align-items:center; justify-content:space-between;
  padding:12px 0 !important; background:transparent !important; border:0 !important;
  font-size:12px !important; font-weight:400 !important; color:var(--ink) !important;
  text-align:left; box-shadow:none !important; min-height:0 !important;
}
html.wzy-on .wzyFoldRow .btn::after{
  content:'+' !important; color:var(--wzy-mark) !important;
  background:none !important; border:0 !important;
  width:auto !important; height:auto !important; min-width:0 !important;
  border-radius:0 !important; box-shadow:none !important;
  font:400 15px/1 var(--font-ui) !important; padding:0 !important; display:inline !important;
}
html.wzy-on .wzyFoldRow .btn.active::after{ content:'−' !important }
html.wzy-on .yaoPanel{
  background:transparent !important; border:0 !important; padding:0 0 12px !important;
  margin:0 !important; border-bottom:1px solid var(--wzy-rule-soft);
}
/* 시기 판단 fallback 은 감춘다 — 시기가 특정 안 될 때 나오는 범용 안내라 매번 같은 말만
   반복한다(사용자 요청으로 제거). 실제 시기가 잡히는 경우는 '괘 배치·산출 근거' 안에 남는다. */
html.wzy-on #v141TimingFallback{ display:none !important }
html.wzy-on .wzyFold > summary{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  font-size:12px; color:var(--ink); cursor:pointer; list-style:none;
}
html.wzy-on .wzyFold > summary{
  display:flex !important; justify-content:space-between; align-items:center; gap:10px;
}
html.wzy-on .wzyFold > summary::-webkit-details-marker{ display:none }
/* 앱마다 summary::after 마커가 제각각이다(원형 배지 24px·다른 배경·▾ 등).
   그걸 전부 죽이고 — 배경·테두리·크기를 지워 — 내 +/− 하나로 통일한다.
   안 그러면 앱 마커와 내 마커가 겹쳐 두 개로 보인다. */
html.wzy-on .wzyFold > summary::after{
  content:'+' !important; color:var(--wzy-mark) !important;
  background:none !important; border:0 !important;
  width:auto !important; height:auto !important; min-width:0 !important;
  border-radius:0 !important; box-shadow:none !important;
  font:400 15px/1 var(--font-ui) !important; padding:0 !important;
  display:inline !important;
}
html.wzy-on .wzyFold[open] > summary::after{ content:'−' !important }
html.wzy-on .wzyFold > .wzyFoldBody{
  font-size:11.5px; line-height:1.7; color:var(--muted-strong); margin-top:9px;
}
/* 아코디언이 된 앱 블록의 자식 껍데기도 벗긴다 (카드 안 카드 방지) */
html.wzy-on #ruleHelpBox,
html.wzy-on .wzyFold > .evidenceBody,
html.wzy-on .wzyFold > .summary{
  background:transparent !important; border:0 !important; box-shadow:none !important;
  margin:0 !important; padding:0 !important;
}
html.wzy-on .wzyFold > *:not(summary){ margin-top:9px }

/* '효별 상세표 열기'는 괘 배치 서랍 안에 이미 같은 표가 있어 중복이다 */
html.wzy-on .v176ExpertAction{ display:none !important }

/* 하단 마감 */
html.wzy-on .wzyFootNote{
  margin-top:14px; font-size:10px; line-height:1.7; color:var(--muted-strong);
}
html.wzy-on .newCastBottom{ display:block !important; margin-top:20px }
html.wzy-on .newCastBottom .btn{ width:100%; padding:14px; font-size:13.5px; font-weight:600 }

/* 결과 화면에서 걷어낼 것 — 시안에 없고, 있으면 답을 찾기 어려워진다 */
html.wzy-on #v127group,
html.wzy-on .resultNav .v176CopyWrap,
html.wzy-on #briefPanel,
html.wzy-on #v141ClosingNote,
html.wzy-on #resultPanel > p.notice,
html.wzy-on #floatDock{ display:none !important }

/* ②⑤⑦ 같은 절 번호를 뗀다 — 읽는 사람에게 몇 번째 절인지는 정보가 아니다 */
html.wzy-on .v141SectionNo{ display:none !important }

/* '핵심 판단' 중간 헤더 카드를 걷고 껍데기를 벗긴다 (SPEC 2·3 — 카드 안 카드 금지).
   판정은 이미 위 카드가 말했고, 여기서 한 번 더 등급을 되풀이하면 답이 흐려진다. */
html.wzy-on #autoToggle{ display:none !important }
html.wzy-on #autoPanel{
  background:transparent !important; border:0 !important; box-shadow:none !important;
  margin:0 !important; padding:0 !important; overflow:visible !important;
}
html.wzy-on #autoBody{
  display:block !important; background:transparent !important;
  border:0 !important; padding:0 !important;
}
html.wzy-on #v141LogicLead, html.wzy-on #autoAdvice{ display:none !important }

/* ── 자세히 / 라이트 보기 전환 (REVIEW #1 유지) ──────────
   v176 심플셸(css/20)이 #viewTabs 를 display:none 으로 감췄다. REVIEW 는 이걸 되살려
   초보와 숙련자를 한 화면에서 수용하라고 한다 — 라이트=판정+4칸까지, 자세히=근거·원문까지.
   앱의 토글 로직은 그대로 살아 있어 되살리기만 하면 pro 요소 숨김/보임이 따라온다.
   #resultPanel 이 flex column + order 라 순서는 order 로 잡는다(.head -60 다음, 괘쌍 -55 앞). */
html.wzy-on #viewTabs.viewTabs{
  display:flex !important; gap:6px; order:-58; margin:2px 0 14px !important;
  padding:0 !important; border:0 !important; background:transparent !important;
}
html.wzy-on #viewTabs .viewTab{
  flex:1; padding:9px 0 !important; text-align:center;
  font:500 11.5px var(--font-ui) !important;
  color:var(--wzy-lead) !important; background:transparent !important;
  border:1px solid var(--line-strong) !important; border-radius:9px !important;
  box-shadow:none !important; min-height:0 !important; cursor:pointer;
}
html.wzy-on #viewTabs .viewTab:hover{ border-color:var(--wzy-600) !important }
html.wzy-on #viewTabs .viewTab.active{
  background:var(--wzy-sel) !important; border-color:var(--accent) !important;
  color:var(--wzy-lead) !important; font-weight:600 !important;
}
/* 라이트 보기 = 판정 + 괘쌍 + 4칸 요약까지 (SPEC 3c).
   앱의 view-light 게이팅은 4칸을 pro 로 숨기고 괘배치·전통풀이는 남겨 SPEC 과 어긋났다 —
   여기서 라이트의 노출 범위를 다시 정의한다. 자세히에서만 근거·괘배치·원문·내보내기가 붙는다. */
html.wzy-on body.view-light .wzyFolds,
html.wzy-on body.view-light .wzyFold,
html.wzy-on body.view-light #v176ChartDetails,
html.wzy-on body.view-light .yaoActionTabs,
html.wzy-on body.view-light .yaoPanel,
html.wzy-on body.view-light #resultTools,
html.wzy-on body.view-light #promptPanel{ display:none !important }
/* 4칸 요약은 라이트에서도 보인다. 그런데 4칸은 #autoPanel[data-view=pro] > #autoBody >
   #autoReasons > .v161Story 로 깊이 묻혀 있고, 앱은 라이트에서 #autoPanel 을 통째로 숨긴다.
   그 계층을 되살려야 4칸이 나온다 — 안의 아코디언(.wzyFold)은 위에서 이미 숨겼으니
   되살아나는 건 4칸뿐이다. */
html.wzy-on body.view-light #autoPanel,
html.wzy-on body.view-light #autoBody,
html.wzy-on body.view-light .v161Story{ display:block !important }
html.wzy-on body.view-light #autoReasons{ display:grid !important }
html.wzy-on body.view-light .v161StoryGrid{ display:grid !important }
html.wzy-on body.view-light .wzySectionLabel{ display:block !important }
/* autoReasons 안에는 4칸(.v161Story) 말고 근거 아코디언·시기판단도 있다 — 라이트에선 숨긴다 */
html.wzy-on body.view-light #autoReasons > .evidenceDetails,
html.wzy-on body.view-light #v141TimingFallback,
html.wzy-on body.view-light #v141LogicLead,
html.wzy-on body.view-light #autoAdvice{ display:none !important }

/* 결과 상단바 — ← 새로 작괘 / 결과 / 한자 보기 */
html.wzy-on .resultNav{
  display:flex !important; align-items:center; justify-content:space-between;
  padding:14px 0 !important; border-bottom:0 !important;
}
html.wzy-on .resultNav .newCastBtn{
  font-size:11.5px !important; color:var(--wzy-lead) !important;
  background:none !important; border:0 !important; padding:0 !important;
}
html.wzy-on .resultNavTitle{ font-size:11px !important; color:var(--muted-strong) !important }
html.wzy-on .resultNavTitle b{ font-weight:400 !important }
/* 상단바에 있던 시절의 규칙 — id 라 클래스 규칙(.wzyScriptTop)을 특이도로 눌렀다.
   지금은 결과 머리로 옮겼으니 옮겨진 상태는 건드리지 않는다. */
html.wzy-on #scriptToggleBtn:not(.wzyScriptTop){
  font-size:11px !important; color:var(--wzy-lead) !important;
  background:none !important; border:0 !important; padding:0 !important;
}
/* 아코디언 제목 — 앱이 쓰는 글자는 가리고 우리 제목을 의사요소로 보인다.
   textContent 를 서로 덮어쓰던 깜빡임을 없애기 위한 것이다(사용자 지적). */
html.wzy-on summary.wzyFoldHead{ position:relative; color:transparent !important; }
html.wzy-on summary.wzyFoldHead > *{ visibility:hidden; }
/* 아코디언 바 통일(사용자 지적) — 실측으로 셋이 갈려 있었다:
   전문 산출 기준·근거 N항목은 채운 바(배경 .067 / 높이 54), 괘 배치는 투명 41px.
   앱 CSS 가 .evidenceDetails 만 칠하고 내가 만든 details 는 손대지 않아서다.
   .wzyFoldHead 는 셋 다 갖고 있으니 그 클래스로 한 번에 묶는다. */
html.wzy-on summary.wzyFoldHead{
  min-height:52px !important; padding:0 13px !important;
  display:flex !important; align-items:center !important;
  background:rgba(255,255,255,.055) !important;
  border:1px solid rgba(187,171,255,.14) !important; border-radius:12px !important;
}
html.wzy-on .wzyFold[open] > summary.wzyFoldHead{
  border-bottom-left-radius:0 !important; border-bottom-right-radius:0 !important;
}
html.wzy-on .wzyFold{
  border:0 !important; background:transparent !important; box-shadow:none !important;
  border-radius:12px !important; overflow:hidden;
}
html.wzy-on .wzyFold + .wzyFold{ margin-top:8px !important; }
/* '전통 괘상 풀이'는 알약 버튼이라 아코디언 줄과 다른 계열로 보였다 — 같은 바 모양으로.
   #yaoToggle 로 걸면 css/08·09 의 !important 사슬에 계속 밀렸다(실측: min-height 가 0 으로 남음).
   .wzyFoldHead 에서 먹은 것과 같은 모양(요소+클래스)으로 걸고, JS 가 클래스를 붙인다. */
html.wzy-on button.wzyBarBtn{
  background-image:none !important;
  width:100% !important; min-height:52px !important; height:auto !important;
  padding:0 13px !important; display:flex !important; align-items:center !important;
  text-align:left !important; justify-content:flex-start !important;
  font-size:12.5px !important; font-weight:600 !important;
  background-color:rgba(255,255,255,.055) !important; color:var(--ink) !important;
  border:1px solid rgba(187,171,255,.14) !important; border-radius:12px !important; box-shadow:none !important;
}
html.wzy-on body:not(.dark-mode) button.wzyBarBtn{
  background-color:rgba(145,132,217,.05) !important; border-color:rgba(145,132,217,.18) !important;
}
html.wzy-on body:not(.dark-mode) summary.wzyFoldHead{
  background:rgba(145,132,217,.05) !important; border-color:rgba(145,132,217,.18) !important;
}
html.wzy-on summary.wzyFoldHead::before{
  content:attr(data-wzy-title); position:absolute; left:13px; top:50%; transform:translateY(-50%);
  color:var(--ink); font-weight:600; font-size:12.5px; white-space:nowrap; letter-spacing:-.01em;
}

/* ── 반응형 최종 오버라이드 ─────────────────────────────
   위 기본 규칙(.v161StoryGrid 2열 !important, h1 26px)이 파일 뒤쪽이라 source order 로
   미디어 규칙을 이겼다 — 4칸이 900+ 에서도 2열, h1 이 안 커졌다.
   같은 특이도·같은 !important 면 나중 규칙이 이기므로, 승부를 내는 규칙은 파일 맨 끝에 둔다. */
@media (min-width:900px){
  html.wzy-on .v161StoryGrid{ grid-template-columns:repeat(4,1fr) !important }
}

/* ══ ① 설정 시트 3탭 통합 ══════════════════════════════
   환경설정·12시진·사용 가이드 오버레이를 하나의 시트 + 3탭으로. 짝 JS 가 내용을 옮기고
   여기서 옷을 입힌다. .helpOverlay/.helpDialog 는 셋이 공유하는 골격이다. */
html.wzy-on .helpOverlay.show{ background:rgba(41,43,49,.34) !important; }
html.wzy-on body.dark-mode .helpOverlay.show{ background:rgba(10,10,18,.58) !important; }
html.wzy-on #settingsOverlay .helpDialog,
html.wzy-on #sijinOverlay .helpDialog,
html.wzy-on #helpOverlay .helpDialog{
  background:var(--panel-strong) !important; border:1px solid var(--line-strong) !important;
  border-radius:16px !important; box-shadow:0 24px 60px rgba(89,80,150,.24) !important;
  width:min(560px, calc(100vw - 28px)) !important; max-height:min(84vh,760px) !important;
  padding:18px 20px 22px !important;
}
html.wzy-on .helpHead{
  border-bottom:0 !important; margin-bottom:10px !important; padding-bottom:0 !important;
  align-items:center !important;
}
html.wzy-on .helpHead h3{ font-size:16px !important; font-weight:600 !important; color:var(--ink) !important; letter-spacing:-.01em; }
html.wzy-on .helpClose{
  background:transparent !important; border:0 !important; color:var(--muted) !important;
  font-weight:400 !important; font-size:12px !important; padding:6px !important; min-height:0 !important;
}

/* 탭 스위처 */
html.wzy-on .wzySetTabs{ display:flex; gap:6px; margin:0 0 16px; }
html.wzy-on .wzySetTabs button{
  flex:1; padding:10px 0; font:500 12px var(--font-ui);
  color:var(--wzy-lead); background:transparent;
  border:1px solid var(--line-strong); border-radius:9px; cursor:pointer;
}
html.wzy-on .wzySetTabs button:hover{ border-color:var(--wzy-600); }
html.wzy-on .wzySetTabs button.active{ background:var(--wzy-sel); border-color:var(--accent); font-weight:600; }
html.wzy-on .wzySetPanel[hidden]{ display:none; }
html.wzy-on .wzySetPanel{ animation:wzyRise .22s ease both; }
@keyframes wzyRise{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }

/* 설정 그룹(일진 경계·테마) — 카드 껍데기를 벗기고 라벨+옵션만 */
html.wzy-on .settingsGroup{
  background:transparent !important; border:0 !important; box-shadow:none !important;
  padding:0 !important; margin:0 0 18px !important;
}
html.wzy-on .settingsGroup:last-child{ margin-bottom:0 !important; }
html.wzy-on .settingsLabel{
  display:block !important; font-size:10.5px !important; letter-spacing:.06em;
  color:var(--muted-strong) !important; margin-bottom:8px !important; font-weight:400 !important;
}
html.wzy-on .settingsOpt{
  display:flex !important; gap:10px; align-items:flex-start; text-align:left;
  padding:12px !important; margin-bottom:6px !important; cursor:pointer;
  background:transparent !important; border:1px solid var(--line) !important; border-radius:10px !important;
  color:var(--ink) !important; font-size:12.5px !important; line-height:1.5 !important;
  transition:border-color .16s;
}
html.wzy-on .settingsOpt:hover{ border-color:var(--wzy-600) !important; }
html.wzy-on .settingsOpt:has(input:checked){
  border-color:var(--accent) !important; background:var(--wzy-sel) !important;
}
html.wzy-on .settingsHint{
  margin-top:12px !important; font-size:10.5px !important; line-height:1.6 !important;
  color:var(--muted) !important; background:transparent !important; border:0 !important; padding:0 !important;
}

/* 12시진 그리드 */
html.wzy-on .sijinList{
  display:grid !important; grid-template-columns:1fr 1fr !important; gap:6px !important;
}
html.wzy-on .sijinList > *{
  padding:9px 10px !important; border-radius:9px !important;
  border:1px solid var(--line) !important; background:transparent !important;
  font-size:11.5px !important; color:var(--ink) !important;
}
/* 지금 시진 강조 — 앱이 .now/.active/.current 중 무엇을 쓰든 덮는다 */
html.wzy-on .sijinList > .now, html.wzy-on .sijinList > .active,
html.wzy-on .sijinList > .current, html.wzy-on .sijinList > .wzyNow, html.wzy-on .sijinList > [class*=now]{
  border-color:var(--accent) !important; background:var(--wzy-sel) !important; color:var(--wzy-lead) !important;
}

/* 사용 가이드 카드 */
html.wzy-on .helpGrid{ display:flex !important; flex-direction:column; gap:10px !important; }
html.wzy-on .helpItem{
  background:var(--wzy-card) !important; border:1px solid var(--wzy-card-edge) !important;
  border-radius:11px !important; padding:13px !important;
}
html.wzy-on .helpItem > b{ font-size:12px !important; color:var(--ink) !important; }
/* 본문 안의 강조는 문장 흐름을 지킨다 — 크기를 키우지 않고 굵기·색으로만 (2026-08-05) */
/* ★ 줄 끝에서 갈라지지 않게 한다 (사용자 지적) — 굵게 쓴 것은 대개 화면 이름이라
   '어떤 괘가 / 나왔나요' 처럼 반토막이 나면 이름으로 읽히지 않는다.
   가장 긴 것이 108px 이고 글 칸이 252px 이라 넘칠 일은 없다(실측, 굵은 글 21개). */
html.wzy-on .helpItem p b{
  display:inline; font-size:inherit; font-weight:800; color:var(--ink);
  white-space:nowrap;
}
html.wzy-on .helpItem p{ font-size:11.5px !important; line-height:1.65 !important; color:var(--muted-strong) !important; margin:5px 0 0 !important; }
html.wzy-on .helpIntro{ font-size:11px !important; line-height:1.7 !important; color:var(--muted) !important; margin:0 0 14px !important; }

/* ══ ③ 기록 탭 ══════════════════════════════════════════
   #v122records 는 전체화면 오버레이(위에서 상단 여백을 이미 잡았다). 내용을 v180 톤으로. */
html.wzy-on #v122records .helpHead{ border-bottom:0 !important; margin-bottom:6px !important; padding-bottom:0 !important; }
html.wzy-on #v122records .helpHead h3{ font-size:21px !important; font-weight:400 !important; letter-spacing:-.025em; color:var(--ink) !important; }
html.wzy-on #v122records [data-recclose], html.wzy-on #clearSavesBtn{
  background:transparent !important; border:0 !important; color:var(--wzy-lead) !important;
  font-size:11.5px !important; font-weight:400 !important; padding:4px 0 !important; min-height:0 !important;
}
html.wzy-on #saveField{ background:transparent !important; border:0 !important; padding:0 !important; margin:0 0 12px !important; }
html.wzy-on #saveField > label, html.wzy-on #saveField .saveActions > b{ display:none !important; }
/* 필터 칩(전체/오늘) */
html.wzy-on .v128fchip{
  font-size:10.5px !important; padding:5px 10px !important; border-radius:99px !important;
  border:1px solid var(--line-strong) !important; background:transparent !important;
  color:var(--muted-strong) !important; min-height:0 !important;
}
html.wzy-on .v128fchip.active, html.wzy-on .v128fchip[aria-pressed="true"]{
  background:var(--wzy-chip) !important; border-color:var(--line) !important; color:var(--wzy-lead) !important;
}
html.wzy-on #toggleSavesBtn{
  background:transparent !important; border:1px solid var(--line-strong) !important;
  color:var(--wzy-lead) !important; font-size:10.5px !important; border-radius:99px !important;
  padding:5px 10px !important; min-height:0 !important;
}
/* 목록 — 카드가 아니라 위 1px 선으로 나뉜 행 */
html.wzy-on .saveList{ display:flex !important; flex-direction:column !important; gap:0 !important; margin-top:4px !important; }
html.wzy-on .v128recCard, html.wzy-on .saveItem{
  background:transparent !important; border:0 !important; border-top:1px solid var(--wzy-rule-soft) !important;
  border-radius:0 !important; box-shadow:none !important; padding:14px 2px !important; margin:0 !important;
  display:flex !important; align-items:flex-start !important; gap:10px !important;
}
html.wzy-on .saveList .v128recCard:last-child, html.wzy-on .saveList .saveItem:last-child{ border-bottom:1px solid var(--wzy-rule-soft) !important; }
html.wzy-on .v128recMain{ flex:1 !important; min-width:0 !important; }
html.wzy-on .v128recTop b{ font-size:13px !important; font-weight:400 !important; color:var(--ink) !important; }
html.wzy-on .v128recMeta{ display:flex !important; flex-wrap:wrap !important; gap:6px !important; align-items:center !important; margin-top:7px !important; }
html.wzy-on .v128recCat{
  font-size:9.5px !important; padding:2px 6px !important; border-radius:99px !important;
  background:var(--wzy-chip) !important; color:var(--wzy-lead) !important; border:0 !important;
}
html.wzy-on .v128recFlow{ font-size:10.5px !important; color:var(--muted-strong) !important; }
html.wzy-on .v128recDate{ font-size:10px !important; color:var(--muted) !important; }
html.wzy-on .saveDelete{
  flex:none !important; font-size:10.5px !important; font-weight:400 !important;
  color:var(--muted) !important; background:transparent !important;
  border:1px solid var(--line) !important; border-radius:99px !important;
  padding:4px 9px !important; min-height:0 !important; cursor:pointer;
}
html.wzy-on .saveDelete:hover{ border-color:var(--wzy-600) !important; color:var(--wzy-lead) !important; }

/* ══ ④ 수동 작괘 효 빌더 ═══════════════════════════════ */
html.wzy-on .lineBuilder{ background:transparent !important; border:0 !important; padding:0 !important; margin-top:12px !important; }
html.wzy-on .lbHint{ font-size:11px !important; line-height:1.65 !important; color:var(--muted) !important; margin:0 0 12px !important; }
html.wzy-on #lbRows{ display:flex !important; flex-direction:column !important; gap:8px !important; }
html.wzy-on .lbRow{ display:flex !important; align-items:center !important; gap:12px !important; }
html.wzy-on .lbPos{ flex:none !important; width:30px !important; font-size:11px !important; color:var(--muted-strong) !important; }
html.wzy-on .lbLine{
  flex:1 !important; height:34px !important; display:flex !important; align-items:center !important; justify-content:center !important;
  background:transparent !important; border:1px solid var(--line) !important; border-radius:9px !important; cursor:pointer;
  transition:border-color .16s, background .16s;
}
html.wzy-on .lbLine:hover{ border-color:var(--wzy-600) !important; background:rgba(145,132,217,.06) !important; }
html.wzy-on .lbLine .hline .solid, html.wzy-on .lbLine .hline .left, html.wzy-on .lbLine .hline .right{ background:var(--wzy-mark) !important; }
html.wzy-on .lbMove{
  flex:none !important; min-width:44px !important; padding:8px 12px !important; border-radius:9px !important;
  font-size:11.5px !important; font-weight:400 !important; cursor:pointer;
  background:transparent !important; border:1px solid var(--line-strong) !important; color:var(--wzy-lead) !important;
}
html.wzy-on .lbMove[aria-pressed="true"], html.wzy-on .lbMove.active{
  background:var(--wzy-sel) !important; border-color:var(--accent) !important;
}

/* ── 수동/시간 모드 열렸을 때의 중복 정리 ──────────────
   고급영역이 열리면 앱의 원래 모드 세그(원클릭/시간/수동)가 다시 나타나 wzyModeRow 와 겹친다.
   내 세그가 대신하므로 앱 것은 감춘다. */
html.wzy-on .inputPage .seg{ display:none !important; }
/* #v125cta 는 앱이 붙인 하단 고정 '✦ 작괘하기' 버튼 — 각 모드의 인라인 작괘 버튼과 겹친다.
   시안 1a 는 인라인 버튼 하나이므로 이 고정 CTA 는 감춘다(그라데이션·✦ 도 함께 사라진다). */
html.wzy-on #v125cta{ display:none !important; }
/* 수동 모드 박스의 겹치는 헤더/힌트(‘수동 · 이미 알고 있는 괘…’)는 wzyModeHint 가 이미 말한다 */
html.wzy-on #mode-manual > .modeHead, html.wzy-on #mode-manual > b:first-child{ display:none !important; }

/* ══ ② 내보내기 블록 (결과 복사 · AI 프롬프트 복사) ═══════
   자세히(pro) 보기에서만. css/20 이 #promptPanel 을 숨겨 두어 되살린다.
   order 로 판정·근거 다음, '새로 작괘' 앞에 놓는다(#resultPanel 은 flex column). */
/* 내보내기(#promptPanel)를 되살리던 규칙은 걷었다 (2026-08-02) — 기능 자체를 없앴다.
   이 규칙이 !important + 높은 특이도라 새 숨김 규칙을 계속 이기고 있었다(실측). */
html.wzy-on #promptPanel{
  order:-5; background:transparent !important; border:0 !important; box-shadow:none !important;
  border-top:1px solid var(--wzy-rule-soft) !important; border-radius:0 !important;
  margin:0 !important; padding:16px 0 0 !important;
}
html.wzy-on #promptPanel > b{
  display:block !important; font-size:10.5px !important; letter-spacing:.06em;
  color:var(--muted-strong) !important; font-weight:400 !important; margin:0 0 10px !important;
}
/* 패널 상단 안내(‘아래 프롬프트를 복사해…’)는 버튼이 자명하니 접는다 */
html.wzy-on #promptPanel > .notice:first-of-type{ display:none !important; }
html.wzy-on #promptPanel .promptTools{ display:flex !important; gap:8px !important; margin:0 !important; }
html.wzy-on #promptPanel .promptTools .btn{
  flex:1 !important; padding:13px !important; font-size:12.5px !important; font-weight:400 !important;
  background:transparent !important; color:var(--wzy-lead) !important;
  border:1px solid var(--line-strong) !important; border-radius:10px !important; box-shadow:none !important;
}
html.wzy-on #promptPanel #copyPromptBtn{ border-color:var(--accent) !important; font-weight:600 !important; }
html.wzy-on #promptPanel .promptTools .btn:hover{ background:rgba(145,132,217,.1) !important; }
/* 프롬프트 원문 미리보기 — 접힘 */
html.wzy-on .wzyPromptPreview{ margin-top:12px; border-top:1px solid var(--wzy-rule-soft); padding-top:12px; }
html.wzy-on .wzyPromptPreview > summary{
  list-style:none; font-size:11.5px; color:var(--wzy-lead); cursor:pointer;
}
html.wzy-on .wzyPromptPreview > summary::-webkit-details-marker{ display:none; }
html.wzy-on #promptBox{
  width:100% !important; margin-top:10px !important; min-height:180px !important;
  background:var(--wzy-card) !important; border:1px solid var(--wzy-card-edge) !important;
  border-radius:10px !important; padding:12px !important;
  font:400 10.5px/1.7 ui-monospace, Menlo, monospace !important; color:var(--muted-strong) !important;
}
html.wzy-on #promptPanel .shotHint{
  margin-top:10px !important; font-size:10.5px !important; line-height:1.65 !important;
  color:var(--muted) !important; background:transparent !important; border:0 !important; padding:0 !important;
}
/* AI 프롬프트 진입 버튼(#resultTools)은 패널을 직접 살렸으니 감춘다 */
html.wzy-on #resultTools{ display:none !important; }

/* 미리보기 갱신 버튼은 시안(3c)에 없다 — promptBox 가 자동 갱신되므로 감춘다 */
html.wzy-on #refreshPromptBtn{ display:none !important; }

/* 전통 괘상 풀이 버튼(#yaoToggle)이 앱의 .textTabs.yaoActionTabs #yaoToggle{background:그라데이션}
   에서 채워졌다 — id 포함이라 .wzyFoldRow .btn 보다 특이도가 높아 아웃라인이 안 먹었다.
   같은 셀렉터 앞에 html.wzy-on 을 붙여 특이도를 넘겨 아웃라인 행으로 되돌린다. */
html.wzy-on .textTabs.yaoActionTabs #yaoToggle,
html.wzy-on body.dark-mode .textTabs.yaoActionTabs #yaoToggle,
html.wzy-on .textTabs.yaoActionTabs #yaoToggle.active{
  background:transparent !important; color:var(--ink) !important;
  border:0 !important; box-shadow:none !important; min-height:0 !important;
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  width:100% !important; padding:12px 0 !important; text-align:left !important;
  font-size:12px !important; font-weight:400 !important;
}

/* ══ 요청 1 — 히어로 배경 재구성 + 은은한 이동 ═══════════
   별/성운을 눈에 띄되 거슬리지 않게 흐르게 한다(150s/120s 는 너무 느려 정지처럼 보였다).
   성운은 두 겹으로 늘려 깊이를 주고, 바탕 그라데이션도 아주 천천히 숨쉬게 한다. */
html.wzy-on .wzyHero::before{ animation:wzyDrift2 42s ease-in-out infinite alternate !important; }
html.wzy-on .wzyHero::after{ animation:wzyDrift 64s linear infinite alternate, wzyTwk 4.5s ease-in-out infinite !important; }
/* 성운 한 겹을 더 — 반대로 흐르는 옅은 보라 덩어리 */
html.wzy-on .wzyHeroInner{ position:relative; }
/* 질문·상황 칸 라벨 (2026-08-02) — 타로의 '질문 [필수] / 상황 설명 [선택]' 과 같은 결.
   [필수] 는 붉게, [선택] 은 흐리게 — 무엇을 꼭 적어야 하는지 색으로 먼저 읽힌다. */
html.wzy-on .wzyFieldLab{
  display:block; margin:0 0 6px; font-size:12px; font-weight:600;
  color:var(--muted); letter-spacing:-.01em;
}
/* 만세력의 '필수' 배지와 같은 모양 (2026-08-02, 사용자 요청).
   같은 뜻은 사이트 안에서 같은 모양이어야 한다 — 테두리 두른 작은 알약. */
/* 칸 라벨 — 구역 제목(14/700)보다 한 단 낮게 (2026-08-02) */
html.wzy-on .wzyFieldLab{ font-size:12px !important; font-weight:600 !important }
/* [필수] 배지 — 라이트 값을 한 단 내렸다 (2026-08-14, 디자인 점검).
   옛 #8f83d6 은 흰 판에서 대비 3.29 로 기준(4.5) 미달이었다. 지금은 4.6 이다.
   ★ 다크는 아래 줄이 옛 값을 그대로 쓴다 — 거기서는 5.00 으로 이미 넉넉했고,
     라이트용 어두운 색을 다크에 그대로 두면 반대로 안 보인다. 한 색으로는 둘 다 안 된다. */
html.wzy-on .wzyFieldLab .req{
  font-style:normal; font-size:12px; font-weight:700; color:#7567cd;
  border:1px solid rgba(145,132,217,.45); border-radius:5px; padding:1px 5px; margin-left:2px;
}
html.wzy-on body.dark-mode .wzyFieldLab .req{ color:#8f83d6 }
html.wzy-on .wzyFieldLab .opt{
  font-style:normal; font-size:12px; font-weight:600; color:var(--muted);
  opacity:.8; margin-left:2px;
}
/* 안내가 칸 안으로 들어가 라벨 밑 줄은 더 없다 (2026-08-02) */
html.wzy-on .field.contextField textarea::placeholder{ line-height:1.65; word-break:keep-all; opacity:.62 }
html.wzy-on .field.contextField textarea{ min-height:88px }

/* '한자 보기'의 끝 글자가 잘렸다 (2026-08-02, 사용자 지적).
   단추 오른쪽 끝(375px)이 #resultPanel 의 오른쪽 끝과 정확히 같은데 그 칸에
   overflow:hidden 이 걸려 있어, 밑줄과 자간이 밀어낸 마지막 획이 잘려 나갔다.
   칸의 overflow 는 다른 것을 가두는 데 쓰이므로 건드리지 않고, 단추를 안쪽으로 들인다. */
html.wzy-on #scriptToggleBtn{ margin-right:4px !important; padding-right:4px !important }

/* ══ 용신 자동 분류 (2026-08-02) ═══════════════════════════════════════
   첫 화면에서 48개짜리 드롭다운을 접는다 — 질문을 적으면 규칙이 알아서 고른다.
   없애지 않고 감추기만 한다: 결과 화면의 [다르게 보기]가 .wzy-ys-open 을 붙이면 그때 열린다. */
/* ★ 실제 UI 는 <select> 가 아니라 다이얼로그를 여는 단추(#v176CategorySummary)다
   (2026-08-02, 사용자 지적: 아직 보인다). 라벨·단추·셀렉트가 .field.categoryField
   한 칸에 들어 있으므로 칸째 접는다. 없애지 않고 감추기만 한다 —
   결과의 [다르게 보기]가 그 단추를 눌러 원래 다이얼로그를 그대로 연다. */
html.wzy-on .field.categoryField{ display:none }
html.wzy-on .field.categoryField.wzy-ys-open{ display:block }
html.wzy-on #v141YongsinDetail{ display:none }
html.wzy-on .wzy-ys-open #v141YongsinDetail{ display:block }

/* 결과 맨 위 '이렇게 봤어요' 줄 — 조용히 정하고 넘어가면 틀려도 알 수 없다.
   알림이 아니라 확인 도구라 눈에 띄되 요란하지 않게 둔다. */
.wzyYsBar{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:0 0 14px; padding:10px 13px; border-radius:12px;
  background:rgba(145,132,217,.10); border:1px solid rgba(145,132,217,.22);
  font-size:13px; line-height:1.5;
}
.wzyYsBar b{ font-weight:700 }
.wzyYsBar button{
  flex:none; cursor:pointer; border:1px solid rgba(145,132,217,.35);
  background:transparent; color:inherit; border-radius:999px;
  padding:5px 11px; font-size:12px; font-weight:600; font-family:inherit;
}
.wzyYsBar button:hover{ background:rgba(145,132,217,.14) }

/* 시계는 CSS 로 감춘다 (2026-08-02) — 인라인 display:none 을 다른 규칙이
   !important 로 이겨 그대로 보였다(실측: 인라인 none 인데 computed inline-flex).
   지우지 않는 이유는 updateLiveClock() 이 계속 이 요소를 참조하기 때문이다. */
/* .wzyHero #liveClock 쪽이 (0,2,1)+!important 라 (0,1,1) 로는 못 이겼다 (실측: inline-flex).
   같은 특이도로 맞추고 뒤에 두어 이긴다. */
html.wzy-on .wzyHero #liveClock,
html.wzy-on #liveClock{ display:none !important }

/* 질문 아래 주제 확인 줄 (2026-08-02).
   잡았을 때는 조용한 회색 칩, 못 잡았을 때만 눈에 띄는 색으로 — 물어봐야 할 때만 부른다. */
html.wzy-on .wzyTopicChip{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin:7px 0 0; 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.wzy-on .wzyTopicChip b{ font-weight:700 }
html.wzy-on .wzyTopicChip button{
  flex:none; cursor:pointer; border:1px solid rgba(145,132,217,.34);
  background:transparent; color:inherit; border-radius:999px;
  padding:3px 10px; font-size:11.5px; font-weight:600; font-family:inherit;
}
html.wzy-on .wzyTopicChip button:hover{ background:rgba(145,132,217,.14) }
html.wzy-on .wzyTopicChip.ask{
  background:rgba(224,169,42,.12); border-color:rgba(224,169,42,.34);
}
html.wzy-on .wzyTopicChip.ask button{ border-color:rgba(224,169,42,.5) }

/* 첫 화면 육효 소개 (2026-08-02) — 시계가 있던 자리.
   히어로 안이라 가운데 정렬이지만, 세 문단이라 왼쪽 맞춤이 읽기 편하다.
   마지막 줄(한계 고지)은 한 톤 낮춰 본문과 구분한다. */
html.wzy-on .wzyIntro{
  max-width:27em; margin:18px auto 0; text-align:center; text-wrap:balance;
  font-size:13px; line-height:1.8; color:var(--wzy-lead,inherit); word-break:keep-all;
}
html.wzy-on .wzyIntro p{ margin:0 0 8px }
html.wzy-on .wzyIntro p:last-child{ margin-bottom:0 }
html.wzy-on .wzyIntro b{ font-weight:700 }
html.wzy-on .wzyIntro .nb{ font-style:normal; white-space:nowrap }
html.wzy-on .wzyIntroNote{ font-size:12px; opacity:.72 }
@media (max-width:479.98px){ html.wzy-on .wzyIntro{ font-size:12.5px; margin-top:14px } }

/* ══ 히어로를 상자로 가두지 않는다 (2026-08-02, 사용자 요청: 타로처럼) ══════
   .wzyHero 에 overflow:hidden 이 걸려 있어, 그 안의 성운(::before)과 별(::after)이
   **히어로 사각형 안에만** 그려졌다. 실측(다크 768px): 히어로 113~641 · 높이 169 —
   딱 그 크기의 밝은 네모가 배경 위에 얹힌 것처럼 보였다.
   타로는 분위기를 페이지에 깔지, 한 구획 안에 가두지 않는다.

   ★ 히어로 안의 두 겹을 걷고, 같은 성운·별을 화면 전체(fixed)로 옮긴다.
     경계가 사라지면서 분위기는 그대로 남는다.
   ★ 라이트는 원래대로 전부 끈다 — 흰 종이 결이 이 앱 라이트 테마의 바탕이다. */
html.wzy-on .wzyHero::before,
html.wzy-on .wzyHero::after,
html.wzy-on .wzyHero .wzyHeroInner::before{ display:none !important; }

/* 다크에서만 화면 전체에 성운 한 겹 + 별 한 겹. body 에 붙여 어느 구획에도 안 갇힌다. */
html.wzy-on body.dark-mode::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:var(--wzy-nebula);
}
html.wzy-on body.dark-mode::after{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  opacity:var(--wzy-star-op);
  background-image:
    radial-gradient(1.3px 1.3px at 14% 12%,var(--wzy-star-a) 50%,transparent 51%),
    radial-gradient(1px 1px at 33% 6%,var(--wzy-star-b) 50%,transparent 51%),
    radial-gradient(1px 1px at 52% 17%,var(--wzy-star-c) 50%,transparent 51%),
    radial-gradient(1.4px 1.4px at 71% 9%,var(--wzy-star-d) 50%,transparent 51%),
    radial-gradient(1px 1px at 86% 22%,var(--wzy-star-b) 50%,transparent 51%),
    radial-gradient(1.2px 1.2px at 22% 46%,var(--wzy-star-c) 50%,transparent 51%),
    radial-gradient(1px 1px at 64% 58%,var(--wzy-star-a) 50%,transparent 51%),
    radial-gradient(1.3px 1.3px at 88% 74%,var(--wzy-star-d) 50%,transparent 51%);
  /* 반짝이기만 하고 떠 있지는 않았다 (2026-08-04, 사용자 지시) — 히어로 별에는 있는
     흐름이 배경 별에는 없었다. 아주 느리게 함께 흐르게 한다.
     3분에 걸쳐 오가므로 눈에 띄게 움직이지 않고 '살아 있다'는 느낌만 남는다. */
  animation:wzyDrift 180s linear infinite alternate, wzyTwk 7s ease-in-out infinite;
}
/* 하늘(위 ::before·::after) 위로 내용을 올린다.
   ★ 화면에 고정돼야 하는 것은 뺀다 (2026-08-04, 사용자 지적으로 찾음).
     position 을 relative 로 덮으면 fixed 가 풀려 문서 흐름으로 내려앉는다 —
     그래서 용신 시트의 어둠막이 화면 일부에만 걸리고, 열면 화면이 아래로 밀렸다.
     실측으로 보니 다크모드에서 모달·토스트·바 열두 개가 다 고정을 잃고 있었다.
     ★ 가이드 모달(#wzg-modal)도 같은 병을 앓았다 (2026-08-08 발견) — 다크에서 문서 흐름에
       깔려 화면 밖(y878)에 그려졌다. 새 전역 오버레이를 만들면 이 목록에 넣을 것. */
html.wzy-on body.dark-mode > *:not(.helpOverlay):not(.detailModal):not(.toast):not(.v176CategoryOverlay):not(#wz-bar):not(#wz-uses):not(#wz-uses-gate):not(#wzacct):not(#wz-sheet):not(#wzp-sheet):not(#v122nav):not(#v125cta):not(.wzy-tip):not(#wzyCastVeil):not(#wzg-modal):not([class*=Veil]):not([class*=Overlay]):not([class*=overlay]){
  position:relative; z-index:1;
}
@media (prefers-reduced-motion: reduce){
  html.wzy-on body.dark-mode::after{ animation:none !important }
}
/* 라이트는 페이지 라디얼도 끈다 — 흰 종이 결만 남긴다 */
html.wzy-on body:not(.dark-mode) .shell:before{ display:none !important; }
html.wzy-on .wzyHero .wzyHeroInner::before{
  content:''; position:absolute; inset:-30% -20%; z-index:-1; pointer-events:none;
  background:radial-gradient(40% 50% at 72% 20%, rgba(150,138,224,.16), transparent 70%);
  animation:wzyDrift 54s ease-in-out infinite alternate-reverse;
}
/* 바탕이 천천히 밝기·크기를 바꿔 '살아 있게' */
html.wzy-on .wzyHero{ background-size:100% 140% !important; animation:wzyHeroBreathe 26s ease-in-out infinite alternate; }
@keyframes wzyHeroBreathe{ from{background-position:50% 0%} to{background-position:50% 100%} }
@media (prefers-reduced-motion: reduce){
  html.wzy-on .wzyHero, html.wzy-on .wzyHero .wzyHeroInner::before{ animation:none !important; }
}

/* ══ 요청 2 — 결과 상단 바 재구성 ══════════════════════
   '새로 작괘'(하단에 있음)·복사·'결과' 라벨을 없앤다. 한자 보기는 JS 가 내보내기로 옮겼다. */
html.wzy-on .resultNav{ display:none !important; }
/* 괘 결과 상단 우측 작은 버튼으로 옮긴 한자 보기(사용자 요청).
   내보내기 블록에 뒀더니 결과를 읽는 동안 표기를 바꾸려면 화면 끝까지 내려가야 했다.
   .head 는 가운데 정렬이라 버튼만 절대배치로 우측 위에 띄운다. */
html.wzy-on .head{ position:relative !important; }
html.wzy-on .wzyScriptTop{
  position:absolute !important; top:0 !important; right:0 !important;
  padding:5px 9px !important; min-height:0 !important; font-size:11px !important; font-weight:400 !important;
  background:transparent !important; color:var(--wzy-lead) !important;
  border:1px solid var(--line-strong) !important; border-radius:7px !important; box-shadow:none !important;
  white-space:nowrap; z-index:2;
}
html.wzy-on .wzyScriptTop:hover{ background:rgba(145,132,217,.12) !important; }

/* ══ 요청 3 — 머리(용신·괘 이름·계보) 센터 정렬 ═════════ */
html.wzy-on .head{ text-align:center !important; }
html.wzy-on .head > div{ align-items:center !important; }
html.wzy-on .wzyYong, html.wzy-on #mainName, html.wzy-on #lineage{ text-align:center !important; }

/* ══ 요청 4 — 자세히/라이트 통합, 하단 바 제거 ══════════
   보기 구분을 없앤다: 세그먼트를 감추고 늘 전체로 본다(JS forceFullView 가 라이트를 되돌린다). */
/* 앞의 surfacing 규칙(#viewTabs.viewTabs{display:flex})이 특이도로 이기므로 같은 셀렉터로 숨긴다 */
html.wzy-on #viewTabs.viewTabs{ display:none !important; }
/* 하단 고정 탭바 제거 — 기록은 상단 우측으로 옮겼다 */
html.wzy-on #v122nav{ display:none !important; }
/* 하단 바가 사라졌으니 그만큼 비워 두던 하단 여백도 줄인다 */
html.wzy-on #v122records.helpOverlay.show .helpDialog{ padding-bottom:32px !important; }
/* 기록은 플로팅 독(wzd-rec)으로 올렸다 — 상단엔 별도 버튼을 두지 않는다. */

/* ══ 작괘 로딩 오버레이 (사용자 요청) ══════════════════
   누르고 결과가 뜨기까지 아무 표시가 없어 눌렸는지 알 수 없었다.
   여섯 효가 아래에서 위로 차례로 켜지는 동작으로 '괘를 세우는 중'을 보인다. */
#wzyCastVeil{
  position:fixed; inset:0; z-index:2000020; display:none;
  background:rgba(11,10,22,.72); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  align-items:center; justify-content:center;
}
#wzyCastVeil.on{ display:flex; }
body:not(.dark-mode) #wzyCastVeil{ background:rgba(250,248,255,.82); }
.wzyCastVeilIn{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:26px 30px; text-align:center;
}
.wzyCastVeilIn > b{ font-size:15px; font-weight:600; color:var(--ink); letter-spacing:-.01em; }
.wzyCastVeilIn > span{ font-size:12px; color:var(--muted); line-height:1.6; }
/* 여섯 효 — 아래에서 위로 차례로 켜진다 */
.wzyCastLines{ display:flex; flex-direction:column-reverse; gap:6px; width:96px; }
.wzyCastLines > i{
  display:flex; height:6px; border-radius:3px; background:var(--accent);
  opacity:.16; animation:wzyCastOn 1.15s ease-in-out infinite;
}
/* 음효 — 가운데가 끊긴 두 토막 (2026-08-02). 면을 지우고 조각을 따로 그린다 */
.wzyCastLines > i.yin{ background:none; gap:16% }
.wzyCastLines > i.yin > s{ flex:1; height:100%; border-radius:3px; background:var(--accent) }
.wzyCastLines > i:nth-child(1){ animation-delay:0s }
.wzyCastLines > i:nth-child(2){ animation-delay:.1s }
.wzyCastLines > i:nth-child(3){ animation-delay:.2s }
.wzyCastLines > i:nth-child(4){ animation-delay:.3s }
.wzyCastLines > i:nth-child(5){ animation-delay:.4s }
.wzyCastLines > i:nth-child(6){ animation-delay:.5s }
@keyframes wzyCastOn{ 0%,100%{ opacity:.16 } 45%{ opacity:1 } }
@media (prefers-reduced-motion: reduce){
  .wzyCastLines > i{ animation:none; opacity:.55 }
}


/* ══ 용신 시트 정리 ══════════════════════════════════════════════════════
   ① '적용 중 · ○○' — 고른 칸이 이미 강조돼 있고, 시트를 닫으면 요약 버튼에 같은 값이 또 나온다.
   ★ 2026-08-04 되돌림 — 전에는 .v122subsWrap 까지 함께 숨겼는데, 그러면 **세부 주제를
     고를 수 없다.** 걷으려던 것은 '세부 선택 없이 바로 적용됩니다' 한 줄이었지
     세부 알약이 아니었다(사용자 지적: 큰 묶음만 보이고 49주제를 못 고른다).
     세부가 실제로 없는 묶음에서만 그 칸이 접히게 둔다. */
html.wzy-on #v176CategoryOverlay .v122cur{ display:none !important; }
html.wzy-on #v176CategoryOverlay .v122subsWrap:has(.v122subs:empty){ display:none !important; }

/* ④ 괘 도해를 위로 — 아래 판정 카드와 붙어 답답했다(사용자 지적) */
html.wzy-on .wzyGuaPair{ margin-top:6px !important; margin-bottom:26px !important; }

/* ③ '한자 보기' — 테두리·면을 걷고 글자만 남긴다(사용자 요청) */
html.wzy-on button.wzyScriptTop{
  padding:3px 2px !important; font-size:10.5px !important; font-weight:400 !important;
  background:none !important; background-color:transparent !important;
  border:0 !important; box-shadow:none !important;
  color:var(--muted) !important; text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:rgba(145,132,217,.4);
}
html.wzy-on button.wzyScriptTop:hover{ color:var(--wzy-lead) !important; }

/* ══ 결과 개편 P0 (2026-08-02) — 왜·풀이 카드는 기존 lightPathCard 결을 그대로 탄다 ══ */
.lightWhyCard ul{ margin:0; padding-left:1.05rem }
.lightWhyCard li{ font-size:12.5px; line-height:1.68; margin-bottom:4px; word-break:keep-all }
.lightWhyCard li:last-child{ margin-bottom:0 }
.lightWhyCard li.lw-good::marker{ color:#4a83c0 }
.lightWhyCard li.lw-bad::marker{ color:#c0784a }
.lightAdviceBody{ font-size:12.5px; line-height:1.7; word-break:keep-all }
.lightAdviceBody strong{ display:block; margin:2px 0 4px; font-size:12px }
#lightAiSlot:empty{ display:none }
#lightAiSlot #wzyAiPanel{ margin-top:2px }

/* ══ 질문-답 리포트를 통합 보기의 머리로 (2026-08-02, 결과 개편 P0) ══════════
   이 앱은 라이트/자세히 통합(요청 4) 때 forceFullView 가 늘 view-pro 로 되돌리므로,
   base-theme 의 body.view-pro [data-view="light-only"]{display:none!important} 에
   걸려 #lightSummaryPanel(답→왜→어떻게 깔때기)이 영구히 숨는다.
   같은 !important 에서 특이도(1,0,1 > 0,1,1)로 이겨 항상 보이게 한다.
   ★ 결과가 비었을 때는 도로 숨긴다 — 빈 블록이 여백만 만든다. */
html.wzy-on #lightSummaryPanel{ display:block !important }
html.wzy-on #resultPanel.is-empty #lightSummaryPanel{ display:none !important }

/* 리포트가 위에 서면서 겹치는 프로 블록은 걷는다:
   · ② 결론 카드 — 답 카드(질문 인용+판정+점수)와 같은 내용의 축약본
   · ①~⑦ 순서 내비 — 걷힌 결론을 가리키는 번호 지도라 더는 맞지 않다 */
html.wzy-on #v141ConclusionCard,
html.wzy-on #v141FlowGuide{ display:none !important }

/* 핵심 판단 아코디언이 통합 보기에서 자동으로 열리는데, 그 안의 맞춤 조언 카드와
   세부 운세는 이제 위 리포트에 그대로 있다 — 같은 화면에 같은 글 두 벌은 안 된다 */
html.wzy-on #autoAdvice .resultLeadCard,
html.wzy-on #autoAdvice .todayFortuneGrid{ display:none !important }

/* ══ 질문-답 리포트의 자리 (2026-08-02, 결과 개편 P0) ═══════════════════════
   #resultPanel 은 flex+order 라 order 가 없으면 음수들 뒤 맨 아래로 밀린다
   (실측: 리포트가 y1231, 내보내기 아래에 섰다). 괘쌍(-55) 바로 다음에 둔다. */
#resultPanel #lightSummaryPanel{ order:-54 !important }

/* '괘를 쉬운 말로' 4칸(v161Story)은 리포트와 자리마다 겹친다 —
   ①질문에 대한 답=답 카드 · ②왜 이렇게 보나요=왜 카드 ·
   ③앞으로의 변화=흐름 해석(접힘) · ④어떻게 대응할까요=행동 3칸.
   같은 화면에 같은 내용 두 벌은 안 된다 — 통째로 걷는다. */
html.wzy-on .v161Story{ display:none !important }

/* '자세히 보기에서 볼 수 있습니다' 안내 — 보기 구분이 통합돼 갈 곳이 없는 말이고,
   그 근거·배치표는 이제 바로 아래에 있다 */
html.wzy-on .lightModeNote{ display:none !important }

/* ═══════════ 결과 v2 (2026-08-02, 승인 시안) — 동양타로 육효 리딩 문법 ═══════════ */

/* 걷는 것 — 시안에 없는 옛 구획 전부. 코드는 남기고 화면에서만 뺀다(재조립 1단계). */
html.wzy-on body.app-view-result .wzyHero{ display:none !important }
html.wzy-on #resultPanel .head,
html.wzy-on #v141RoleStrip,
html.wzy-on #briefPanel,
html.wzy-on #v141ClosingNote,
html.wzy-on #promptPanel,
html.wzy-on #resultTools,
html.wzy-on #resultPanel .yaoActionTabs,
html.wzy-on #yaoPanel,
html.wzy-on #yilinPanel,
html.wzy-on #v176ChartDetails,
html.wzy-on #wzyLimLink,
html.wzy-on #viewTabs,
html.wzy-on .lightStatusRow,
html.wzy-on .lightMoreDetails,
html.wzy-on #detailPanel{ display:none !important }

/* 낙하 3구획(왜·풀이·행동)은 AI 가 성공하면 걷는다 — 같은 질문에 답 두 벌 금지 */
html.wzy-on body.wzy-ai-ok .lightWhyCard,
html.wzy-on body.wzy-ai-ok .lightAdviceCard,
html.wzy-on body.wzy-ai-ok .lightActionGrid{ display:none !important }

/* 자리 — #resultPanel 은 flex+order. 제목 → 질문 → 답·AI(깔때기) → 원전 → 산출근거 */
#resultPanel #wzyV2Sechead{ order:-70 !important }
#resultPanel #wzyV2Asked{ order:-66 !important }
#resultPanel #wzyV2Origin{ order:-40 !important }

/* 제목부 */
html.wzy-on #wzyV2Sechead{ margin-bottom:2px }
html.wzy-on #wzyV2Sechead .wzyBack{
  display:inline-block; margin:0 0 10px; padding:0; border:0; background:none; cursor:pointer;
  font:500 12px/1 inherit; font-family:inherit; color:var(--muted);
}
html.wzy-on #wzyV2Sechead h2{
  margin:0 0 4px; font-size:20px; font-weight:500; letter-spacing:-.025em; text-wrap:balance;
}
html.wzy-on #wzyV2Sechead .wzyPair{ margin:0; font-size:12.5px; line-height:1.75; color:var(--muted-strong) }
html.wzy-on #wzyV2Sechead .gname{ font-weight:600; color:inherit }
html.wzy-on #wzyV2Sechead .jimark{ color:var(--accent); font-weight:400; margin:0 .15rem }
html.wzy-on .wzyYong2{ font-size:11px; letter-spacing:.06em; color:var(--accent); margin-top:2px }
html.wzy-on .nw{ white-space:nowrap }

/* 질문 인용 */
html.wzy-on #wzyV2Asked{
  margin:0 0 2px; padding:.7rem .95rem; border-left:2px solid var(--accent);
  background:var(--surface-soft); border-radius:0 8px 8px 0;
  font-size:14px; color:var(--muted-strong); text-wrap:pretty; word-break:keep-all;
}

/* 답 카드 — ai-verdict 옷 (연보라 면, 흰 바탕 위) + 결론 2줄 예약 */
html.wzy-on .lightDecisionCard{
  background:var(--surface-soft) !important; border:1px solid var(--accent) !important;
  border-radius:12px !important; box-shadow:none !important;
}
html.wzy-on .lightDecisionCard .lightDecisionText{ min-height:3.4em }

/* AI 패널 — 골격은 블러 + 자리 예약(도착해도 안 출렁이게) */
html.wzy-on #wzyAiPanel .wzySkel{
  margin:.6rem 0 0; min-height:3.4rem; font-size:12.5px; line-height:1.75; color:var(--muted);
  filter:blur(4px); user-select:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 30%,transparent);
  mask-image:linear-gradient(to bottom,#000 30%,transparent);
}
html.wzy-on #wzyAiPanel .wzy-ai-retry{ margin-top:.6rem }

/* ── 원전부: 여섯 효 스택 + 효사 + 변화의 폭 ───────────────────────────── */
html.wzy-on .wzyOrigin{ display:flex; flex-direction:column; gap:14px; margin-top:6px }
html.wzy-on .wzyOrigin .oc{ display:flex; flex-direction:column; gap:14px; min-width:0 }
html.wzy-on .wzyYlab{
  margin:0 0 -4px; font-size:.66rem; font-weight:700; letter-spacing:.12em;
  color:var(--muted); text-transform:uppercase;
}
html.wzy-on .wzyStack{ display:flex; flex-direction:column; gap:.55rem }
html.wzy-on .yrow2{
  background:var(--panel,#fff); border:1px solid var(--line,#e6e1f5);
  border-radius:12px; padding:.72rem .9rem;
}
html.wzy-on .yrow2.dong{ border-color:var(--accent) }
html.wzy-on .yrow2 .yh{ display:flex; align-items:center; gap:.3rem .5rem; flex-wrap:wrap }
html.wzy-on .ynum2{
  flex:0 0 auto; font-size:.68rem; font-weight:700; color:var(--muted);
  width:1.35rem; height:1.35rem; border:1px solid var(--line,#e6e1f5); border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
}
html.wzy-on .yrow2.dong .ynum2{ border-color:var(--accent); color:var(--accent) }
html.wzy-on .ybar2{ flex:0 0 34px; display:flex }
html.wzy-on .ybar2 i{ height:4px; width:100%; border-radius:2px; background:#c9bfe9 }
html.wzy-on .ybar2 i.yin{ background:linear-gradient(90deg,#c9bfe9 42%,transparent 42% 58%,#c9bfe9 58%) }
html.wzy-on .yrow2.dong .ybar2 i{ background:var(--accent) }
html.wzy-on .yrow2.dong .ybar2 i.yin{ background:linear-gradient(90deg,var(--accent) 42%,transparent 42% 58%,var(--accent) 58%) }
html.wzy-on .yrow2 .yh b{ font-size:14px; font-weight:700 }
html.wzy-on .yrow2 .yrel{ font-size:12.5px; color:var(--muted-strong) }
html.wzy-on .ytag{
  font-size:.66rem; font-weight:700; color:var(--accent);
  border:1px solid var(--accent); border-radius:999px; padding:.05rem .42rem;
}
html.wzy-on .ytag.mut{ color:var(--muted); border-color:var(--line,#e6e1f5) }
html.wzy-on .ychg{ font-size:12px; color:var(--accent); margin-left:auto }
html.wzy-on .yrow2 .ytx{
  margin:.42rem 0 0 calc(1.35rem + .5rem); font-size:12.5px; line-height:1.65;
  color:var(--muted-strong); text-wrap:pretty; word-break:keep-all;
}

/* 패널 공통(효사·변화의 폭) */
html.wzy-on .wzyPanel{
  background:var(--panel,#fff); border:1px solid var(--line,#e6e1f5);
  border-radius:12px; padding:1.05rem 1.1rem;
}
html.wzy-on .wzyPanel h3{
  margin:0 0 .65rem; font-size:15px; font-weight:600;
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
}
html.wzy-on .wzyLbl{ font-size:.66rem; letter-spacing:.1em; color:var(--muted); font-weight:400 }
html.wzy-on .wzyLuck{ font-size:12px; font-weight:700; border-radius:999px; padding:.1rem .55rem }
html.wzy-on .wzyLuck.good{ background:#e9f2fb; color:#2a6ba8 }
html.wzy-on .wzyLuck.bad{ background:#fbecec; color:#b04343 }
html.wzy-on .wzyLuck.mid{ background:var(--surface-soft); color:var(--accent) }
html.wzy-on .wzyGist{ margin:0 0 .5rem; font-size:12.5px; color:var(--muted-strong) }

/* 효사 행 — 폭이 되면 '원문 독음 번역' 한 줄, 좁으면 번역만 덩어리째 내려간다 */
html.wzy-on .wzyYl{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.1rem .6rem;
  padding:.34rem 0; border-bottom:1px dashed var(--line,#e6e1f5);
}
html.wzy-on .wzyYl:last-of-type{ border-bottom:0; padding-bottom:0 }
html.wzy-on .wzyYl .o{ font-size:15px; letter-spacing:.05em }
html.wzy-on .wzyYl .du{ font-size:11px; color:var(--muted) }
html.wzy-on .wzyYl .tr2{ font-size:12.5px; line-height:1.6; color:var(--muted-strong); text-wrap:pretty }
html.wzy-on .wzyKv{ display:flex; gap:.5rem 1.1rem; flex-wrap:wrap; font-size:12.5px; color:var(--muted-strong) }

/* 산출 근거 — 남긴 전문 아코디언 묶음의 껍데기를 지운다 (아코디언 3 → 1 묶음) */
html.wzy-on #autoPanel{ background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important }
html.wzy-on #autoPanel .autoHead{ display:none !important }
html.wzy-on #autoBody::before{
  content:'산출 근거 · 전문'; display:block; margin:2px 0 8px;
  font-size:.8rem; font-weight:800; letter-spacing:.12em; color:var(--muted); text-transform:uppercase;
}

/* 반응형 — 900px+ : 해설은 40rem 가운데, 원전은 2열 */
@media (min-width:900px){
  html.wzy-on #wzyV2Sechead,
  html.wzy-on #wzyV2Asked,
  html.wzy-on #lightSummaryPanel,
  html.wzy-on #autoPanel,
  html.wzy-on .newCastBottom{ max-width:40rem; margin-left:auto !important; margin-right:auto !important; width:100% }
  html.wzy-on .wzyOrigin{ display:grid; grid-template-columns:1fr 1fr; gap:16px 40px; align-items:start }
}

/* 베일 AI 국면 */
html.wzy-on .wzyVeilEta{ display:block; margin-top:2px; font-size:12px; color:var(--muted) }
/* ★ 높이를 못박는다 (2026-08-02, 사용자 지적: 아래 단추가 왔다 갔다 함).
   글이 도착할 때마다 두 줄↔세 줄로 바뀌면서 그만큼 아래 단추가 밀렸다.
   min-height 만으로는 늘어나는 쪽을 못 막으므로 height 를 고정하고 넘치는 부분은
   위로 흘려 보낸다(justify-content:flex-end) — 늘 끝자락만 보이는 연출과도 맞다. */
html.wzy-on .wzyBriefTail{
  margin:.9rem auto 0; max-width:20rem;
  height:3.6rem; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
  font-size:12.5px; line-height:1.75; color:var(--muted-strong);
  text-align:center; word-break:keep-all; overflow-wrap:anywhere;
  filter:blur(4px); user-select:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 55%);
  mask-image:linear-gradient(to bottom,transparent,#000 55%);
}
html.wzy-on .wzyBriefTail > span{ display:block }
html.wzy-on .wzyVeilSkip{
  margin-top:.9rem; border:0; background:none; cursor:pointer;
  font:500 12.5px inherit; font-family:inherit; color:var(--muted);
  text-decoration:underline; text-underline-offset:3px;
}

/* 괘사 원문 줄 · 동효 원문 · 초씨역림 딥링크 (2026-08-02) */
html.wzy-on .wzyYim .wzyYl{ border-bottom:0; padding:.15rem 0 }
html.wzy-on .wzyYim .wzyYl .o{ font-size:14.5px; letter-spacing:.05em; line-height:1.7 }
html.wzy-on .wzyGist2{ margin:.6rem 0 0; font-size:12.5px; line-height:1.7; color:var(--muted-strong); text-wrap:pretty; word-break:keep-all }
html.wzy-on .yrow2 .yorig{
  margin:.42rem 0 0 calc(1.35rem + .5rem); font-size:12.5px; letter-spacing:.04em; color:var(--ink);
}
html.wzy-on .yrow2 .yorig + .ytx{ margin-top:.24rem }

/* 구획 사이 숨 (2026-08-02, 사용자 지적: 카드끼리 붙어 있음) —
   실측: 질문↔답 2px, 답↔풀이 2px, 원전↔산출근거 0px. 12~18px 로 벌린다.
   #resultPanel 이 flex 라 gap 을 주면 order 로 재배치한 것에도 고르게 먹는다. */
html.wzy-on #resultPanel{ display:flex; flex-direction:column; gap:14px }
html.wzy-on #resultPanel > *{ margin-top:0 !important; margin-bottom:0 !important }
html.wzy-on #wzyV2Sechead{ margin-bottom:0 !important }
/* 스택 행 사이도 한 뼘 더 (9 → 10px) */
html.wzy-on .wzyStack{ gap:.62rem }
/* 동효 원문은 길면 갈려도 된다 — nowrap 이면 좁은 화면에서 넘친다 */
html.wzy-on .yrow2 .yorig{ white-space:normal; word-break:keep-all }

/* 괘사 원문 — 조각들이 이어 흐르고, 조각 안에서만 안 끊긴다 (2026-08-02) */
html.wzy-on .wzyOrig{
  margin:0; display:flex; flex-wrap:wrap; gap:2px 8px;
  font-size:14.5px; letter-spacing:.05em; line-height:1.75; color:var(--ink);
}

/* ═══════ 자세히 보기 · 말풍선 (2026-08-02, 레퍼런스 Pencake) ═══════════════
   답과 풀이만 먼저 보이고, 원리·평가는 눌러야 나온다. 일반 이용자는 산출 방식을
   찾아 읽지 않는다 — 궁금한 사람만 한 번 더 누르면 된다. */
html.wzy-on #wzyV2More{
  width:100%; margin:2px 0; padding:13px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:6px;
  background:transparent; border:1px solid var(--line,#e6e1f5); border-radius:10px;
  font:600 13px inherit; font-family:inherit; color:var(--muted-strong);
}
html.wzy-on #wzyV2More i{ font-style:normal; font-size:11px; transition:transform .2s }
html.wzy-on body.wzy-open #wzyV2More i{ transform:rotate(180deg) }
/* 자세히 보기는 답·풀이(-54) 다음, 여섯 효(-40) 앞이어야 한다 —
   -38 로 두었더니 여섯 효 아래에 붙어 '무엇을 펼치는 단추'인지 안 보였다(실측). */
#resultPanel #wzyV2More{ order:-42 !important }
/* 별점·보관 키는 펼친 본문을 다 읽은 뒤에 (동양타로와 같은 차례) */
#resultPanel > .wzy-rate{ order:20 !important; margin-top:2px }
#resultPanel .newCastBottom{ order:30 !important }

/* 접혔을 때 감추는 것 — 여섯 효 · 산출 근거 · 별점/보관 키 */
html.wzy-on body:not(.wzy-open) #wzyV2Origin,
html.wzy-on body:not(.wzy-open) #autoPanel,
html.wzy-on body:not(.wzy-open) .wzy-rate{ display:none !important }

/* 여섯 효 행 — 이제 누르는 것이라 button 기본 모양을 지운다 */
html.wzy-on button.yrow2{
  width:100%; text-align:left; font:inherit; font-family:inherit; color:inherit;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
html.wzy-on button.yrow2:hover{ border-color:var(--accent) }
html.wzy-on .ymore{ margin-left:auto; font-style:normal; color:var(--muted); font-size:15px }
html.wzy-on .yrow2 .ychg + .ymore{ margin-left:6px }
html.wzy-on .wzyPair.tapable{ cursor:pointer; text-decoration:underline;
  text-decoration-color:var(--line,#e6e1f5); text-underline-offset:4px }

/* 말풍선 */
.wzyTip{
  position:absolute; z-index:2000030; max-width:min(300px,calc(100vw - 24px));
  background:#4a4a4a; color:#fff; border-radius:9px; padding:12px 15px;
  font:400 12.5px/1.6 inherit; font-family:inherit; word-break:keep-all; text-wrap:pretty;
  box-shadow:0 8px 26px rgba(20,16,40,.28);
}
.wzyTipIn b{ display:block; font-size:13px; font-weight:600; letter-spacing:.03em; margin-bottom:5px }
.wzyTipIn span{ display:block; color:rgba(255,255,255,.82) }
.wzyTipArw{
  position:absolute; top:-6px; width:0; height:0; margin-left:-6px;
  border-left:6px solid transparent; border-right:6px solid transparent;
  border-bottom:6px solid #4a4a4a;
}
.wzyTip.up .wzyTipArw{
  top:auto; bottom:-6px; border-bottom:0; border-top:6px solid #4a4a4a;
}

/* ═══════ 별점·보관 키를 동양타로와 같은 꼴로 (2026-08-02, 사용자 요청) ═══════ */
html.wzy-on #resultPanel > .wzy-rate{
  background:var(--panel,#fff); border:1px solid var(--line,#e6e1f5);
  border-radius:12px; padding:1.1rem 1.15rem;
}
html.wzy-on .wzy-rate .wzy-rate-h{
  margin:0 0 .7rem !important; font-size:15px !important; font-weight:600 !important;
  color:var(--ink) !important; text-align:center;
}
html.wzy-on .wzy-rate .wzy-stars{
  display:flex !important; justify-content:center; align-items:center; gap:.15rem !important;
  touch-action:none; user-select:none; -webkit-user-select:none;
}
html.wzy-on .wzy-rate .wzy-star{
  background:none !important; border:0 !important; padding:.28rem .24rem !important;
  min-width:44px; min-height:44px; font-size:1.95rem !important; line-height:1; cursor:pointer;
  /* 안 켠 별은 테두리만 — 꽉 찬 회색 별 다섯은 이미 준 점수처럼 보인다 */
  color:transparent !important; -webkit-text-stroke:1.2px var(--line,#e6e1f5);
  transition:color .13s ease, transform .13s ease, -webkit-text-stroke-color .13s ease;
}
html.wzy-on .wzy-rate .wzy-star.on{ color:#E8C55A !important; -webkit-text-stroke-color:#C9A227 }
html.wzy-on .wzy-rate .wzy-stars:hover .wzy-star{ -webkit-text-stroke-color:var(--accent) }
html.wzy-on .wzy-rate .wzy-star:active{ transform:scale(1.14) }
html.wzy-on .wzy-stars-val{
  display:block; margin:.35rem 0 0; text-align:center;
  font-size:12.5px; line-height:1.5; color:var(--muted-strong);
}
html.wzy-on .wzy-stars-val em{ font-style:normal; color:var(--muted) }
/* 보관 키 — 두 서비스의 키가 같은 얼굴을 하고 있어야 같은 규격으로 읽힌다 */
html.wzy-on .wzy-rate .wzy-key{
  display:block !important; margin-top:1.1rem !important;
  padding-top:1rem; border-top:1px solid var(--line,#e6e1f5); text-align:center;
}
html.wzy-on .wzy-key-t{ display:block; font-size:12px !important; font-weight:700 !important; color:var(--muted-strong) !important }
html.wzy-on .wzy-key-d{ margin:.45rem 0 .7rem; font-size:12px; line-height:1.6; color:var(--muted) }
html.wzy-on .wzy-rate .wzy-key-v{
  display:block; width:100%; font-family:inherit !important;
  font-size:19px !important; font-weight:600 !important; letter-spacing:.12em !important;
  background:var(--surface-soft) !important; border:1px dashed var(--line,#e6e1f5) !important;
  border-radius:9px !important; padding:.8rem !important; color:var(--accent) !important; cursor:pointer;
}
html.wzy-on .wzy-rate .wzy-key-v:hover{ border-color:var(--accent) !important }
/* 코드는 캡슐 한가운데, '복사'는 캡슐 안 오른쪽 (2026-08-14, 사용자 요청).
   안내 글이던 '눌러서 복사'를 캡슐 안 표시로 바꿨다 — 캡슐 전체가 누르는 자리다.
   코드가 가운데 서야 하므로 표시는 흐름에서 빼내 오른쪽에 얹는다(코드 폭에 영향을 주지 않게). */
html.wzy-on .wzy-key-t, html.wzy-on .wzy-key-d{ flex:1 1 100% }
html.wzy-on .wzy-rate .wzy-key-v{ position:relative; text-align:center }
html.wzy-on .wzy-key-code{ display:inline-block }
html.wzy-on .wzy-key-n{
  position:absolute; right:.8rem; top:50%; transform:translateY(-50%);
  margin:0; font-family:inherit; font-size:11.5px; font-weight:700; letter-spacing:0;
  color:var(--muted); white-space:nowrap;
}
@media (prefers-reduced-motion:reduce){
  html.wzy-on .wzy-rate .wzy-star{ transition:none } html.wzy-on .wzy-rate .wzy-star:active{ transform:none }
}

/* AI 가 답을 썼으면 규칙 판정 카드는 걷는다 (2026-08-02, 사용자 요청) —
   질문 인용이 두 번 나오고, 등급·점수는 타로 결과에 없는 층이다.
   AI 가 실패·스킵일 때만 남아 답을 대신한다(낙하 본문과 같은 규칙). */
html.wzy-on body.wzy-ai-ok .lightDecisionCard{ display:none !important }

/* ═══ 여섯 효를 카드에서 목록 행으로 (2026-08-02, 사용자 요청) ═══════════════
   행마다 테두리·라운드·면을 두르니 여섯 개의 상자가 겹겹이 쌓여 좌우 여백만 먹었다.
   경계는 가는 줄 하나로 충분하다 — 폭을 다 쓰고, 오른쪽 화살표도 뺀다(줄 전체가 누르는 자리). */
html.wzy-on .wzyStack{ gap:0 !important }
html.wzy-on button.yrow2{
  background:transparent !important; border:0 !important; border-radius:0 !important;
  border-bottom:1px solid var(--line,#e6e1f5) !important;
  padding:.82rem .1rem !important; box-shadow:none !important;
}
html.wzy-on button.yrow2:last-child{ border-bottom:0 !important }
html.wzy-on button.yrow2:hover{ background:var(--surface-soft) !important }
/* 움직인 효는 테두리 대신 왼쪽 색 띠로 — 목록 안에서 눈에 걸린다 */
html.wzy-on button.yrow2.dong{
  border-left:2px solid var(--accent) !important; padding-left:.7rem !important;
  background:var(--surface-soft) !important;
}
html.wzy-on .ymore{ display:none }

/* ═══ 여섯 효 막대를 길게 · 열을 맞춘다 (2026-08-02, 사용자 요청) ═══════════
   실측: 막대 칸이 34px 이라 음효 두 토막이 각 15px 밖에 안 됐고, 이름·배지의 시작 x 가
   행마다 달라 세로줄이 어긋나 보였다. 막대를 58px 로 늘리고 앞 세 칸을 고정 폭으로
   잡아 열을 세운다. 동효 행만 왼쪽 띠 때문에 2px 밀리던 것도 투명 띠로 맞춘다. */
html.wzy-on .yrow2 .yh{ gap:.3rem .55rem !important }
html.wzy-on .ybar2{ flex:0 0 58px !important; width:58px }
html.wzy-on .ybar2 i{ height:5px !important; border-radius:2.5px }
html.wzy-on .ybar2 i.yin{
  background:linear-gradient(90deg,#c9bfe9 0 40%,transparent 40% 60%,#c9bfe9 60% 100%) !important;
}
html.wzy-on .yrow2.dong .ybar2 i.yin{
  background:linear-gradient(90deg,var(--accent) 0 40%,transparent 40% 60%,var(--accent) 60% 100%) !important;
}
html.wzy-on .yrow2 .yh b{ min-width:2.6em; flex:0 0 auto }
html.wzy-on .yrow2 .yrel{ flex:0 0 auto; min-width:5.4em }
html.wzy-on button.yrow2{ border-left:2px solid transparent !important; padding-left:.7rem !important }
html.wzy-on button.yrow2.dong{ border-left-color:var(--accent) !important }

/* 배지가 셋(세·공망·동효)인 행만 아직 두 줄이었다 — 변화 표시를 오른쪽 끝으로
   미는 margin-left:auto 가 그 사이를 벌려 자리를 더 먹었다. 배지 옆에 바로 붙인다
   (2026-08-02 실측: 68px → 나머지와 같은 49px). */
html.wzy-on .yrow2 .ychg{ margin-left:0 !important; font-size:11.5px }
html.wzy-on .yrow2 .yrel{ min-width:5em }
html.wzy-on .yrow2 .ytag{ padding:.04rem .38rem }

/* ═══ 본괘 → 변괘 두 카드 (2026-08-02, 동양타로 '지괘 리딩' 차용) ═══════════
   그쪽 결과의 첫 그림은 .result-cards.two — 두 괘가 좌우 카드로 서고 가운데 화살표가
   잇는다. 각 카드는 위에 자리 이름(.rc-role), 아래에 괘 이름이 붙는다.
   육효도 본괘 → 변괘가 있으므로 같은 문법을 그대로 입힌다. 그림만 카드 원화 대신
   여섯 효 막대다. 카드 면은 두르지 않는다(사용자 요청) — 괘 그림 자체가 주인공이다. */
#resultPanel .wzyGuaPair{ order:-60 !important }
html.wzy-on .wzyGuaPair{
  display:flex !important; align-items:stretch; justify-content:center; gap:.8rem;
  margin:2px 0 !important;
}
/* ★ 카드 면은 두르지 않는다 (2026-08-02, 사용자 요청: 카드 대신 각 괘가 나오면 됨) —
   테두리·면을 씌우면 상자 두 개가 되고, 여기서 보여 줄 것은 괘 그림 자체다. */
html.wzy-on .wzyGua{
  flex:1 1 0; max-width:11rem; min-width:0;
  display:flex; flex-direction:column; gap:.45rem; align-items:center;
  background:none; border:0; border-radius:0; padding:.5rem .2rem;
}
html.wzy-on .wzyRcRole{
  font-size:12px; letter-spacing:.06em; color:var(--accent); font-weight:600;
  white-space:nowrap;
}
html.wzy-on .wzyGuaPair .wzyLines{ display:grid !important; gap:5px; width:64px }
html.wzy-on .wzyGuaPair .wzyCap{
  font-size:13.5px !important; font-weight:700 !important; color:var(--ink) !important;
  white-space:nowrap;
}
html.wzy-on .wzyArrow{
  align-self:center; font-size:1.4rem; color:var(--accent); flex:0 0 auto;
}
html.wzy-on .wzyGuaPair .wzyLegend{ font-size:10.5px; color:var(--muted) }
@media (min-width:900px){
  html.wzy-on .wzyGuaPair{ max-width:40rem; margin-left:auto !important; margin-right:auto !important }
}

/* 제목부를 가운데로 (2026-08-02, 사용자 요청) — 동양타로 .sechead 와 같은 꼴.
   그쪽도 제목·괘쌍 한 줄이 화면 가운데에 선다. 밑줄(누를 수 있다는 표시)은
   글자 폭만큼만 그어져야 하므로 괘쌍 줄만 inline-block 으로 감싼다. */
html.wzy-on #wzyV2Sechead{ text-align:center }
html.wzy-on #wzyV2Sechead .wzyPair{ display:inline-block }
html.wzy-on #wzyV2Sechead .wzyYong2{ text-align:center }

/* 대기 줄이 도중에 음↔양으로 뒤척인다 (2026-08-02, 사용자 요청) —
   한 번 정해진 모양이 끝까지 그대로면 '이미 뽑힌 괘'로 읽힌다.
   JS 가 200ms 마다 한 줄씩 바꾸므로 여기서는 바뀌는 순간만 부드럽게 이어 준다. */
.wzyCastLines > i, .wzyCastLines > i.yin > s{ transition:opacity .18s ease }

/* ═══ 면과 카드를 걷는다 (2026-08-02, 사용자 요청: 동양타로처럼) ═══════════
   동양타로 결과는 흰 바탕 위에 글만 흐르고, 질문 인용도 왼쪽 보라 줄 하나로만
   표시한다(.asked 는 옅은 면을 쓰지만 이 앱은 흰 바탕 기준이라 면이 도드라진다).
   AI 풀이도 카드 안이 아니라 본문으로 읽히는 편이 낫다 — 결과의 주인공이라
   상자에 담으면 오히려 곁다리처럼 보인다. */
html.wzy-on #wzyV2Asked{
  background:none !important; border-radius:0 !important;
  padding:.15rem 0 .15rem .9rem !important;
}
html.wzy-on #wzyAiPanel .wzy-ai-out,
html.wzy-on #wzyAiPanel .wzy-ai-body{
  background:none !important; border:0 !important; box-shadow:none !important;
  border-radius:0 !important; padding:0 !important;
}
html.wzy-on #lightSummaryPanel .lightUserReport,
html.wzy-on #lightAiSlot{
  background:none !important; border:0 !important; box-shadow:none !important; padding:0 !important;
}

/* ═══ 낙하 화면(AI 실패·한도·스킵)에도 같은 결을 (2026-08-02, 사용자 지적) ═══════
   AI 가 성공한 화면만 다듬고 낙하 화면은 옛 카드·면 그대로였다. 같은 서비스인데
   AI 를 못 받은 사람만 다른 디자인을 보는 셈이라 그쪽에도 같은 규칙을 건다. */
html.wzy-on .lightWhyCard,
html.wzy-on .lightAdviceCard,
html.wzy-on .lightActionCard,
html.wzy-on .lightFortuneDetails,
html.wzy-on .lightDecisionCard{
  background:none !important; border:0 !important; box-shadow:none !important;
  border-radius:0 !important; padding:0 !important;
}
/* 구획끼리는 가는 줄로만 나눈다 — 상자 대신 */
html.wzy-on .lightWhyCard,
html.wzy-on .lightAdviceCard,
html.wzy-on .lightActionCard{
  border-top:1px solid var(--line,#e6e1f5) !important; padding-top:14px !important;
}
html.wzy-on .lightActionGrid{ display:flex !important; flex-direction:column; gap:0 !important }
html.wzy-on .lightDecisionCard{ padding-bottom:4px !important }
/* 판정 카드 안 질문 재인용은 뺀다 — 바로 위 인용과 같은 말이 두 번 나온다 */
html.wzy-on .lightQuoted{ display:none !important }

/* 실패 안내도 상자를 두르지 않는다 (2026-08-02) — 같은 화면의 다른 구획과 결을 맞춘다 */
html.wzy-on #wzyAiPanel .wzy-ai-err{
  background:none !important; border:0 !important; border-radius:0 !important;
  padding:12px 0 0 !important; margin:0 !important;
  border-top:1px solid var(--line,#e6e1f5) !important;
  font-size:12.5px; line-height:1.7; color:var(--muted-strong) !important; word-break:keep-all;
}
html.wzy-on #wzyAiPanel .wzy-ai-retry{
  width:100%; padding:.85rem; border-radius:10px; cursor:pointer;
  background:transparent !important; border:1px solid var(--accent) !important;
  color:var(--accent) !important; font:600 13.5px inherit; font-family:inherit;
}

/* 패널 자체에도 면이 남아 실패 안내만 연보라 상자 안에 있었다 (2026-08-02 실측) */
html.wzy-on #wzyAiPanel{
  background:none !important; border:0 !important; box-shadow:none !important;
  border-radius:0 !important; padding:0 !important;
}

/* 판정 카드의 ::before 라디얼(등급색 얼룩)도 걷는다 (2026-08-02 실측:
   rgba(236,185,88,.26) 원형 그라디언트가 점수 뒤에 복숭아빛으로 번져 있었다).
   카드 면을 없앤 뒤로는 배경 위에 얼룩만 떠 보인다. */
html.wzy-on .lightDecisionCard::before,
html.wzy-on .lightDecisionCard::after{ display:none !important; content:none !important }

/* ══ 가이드 갈래 아코디언 (2026-08-05, 사용자 지시) ══════════════════════
   30항목이 다 펼쳐져 있어 여섯 갈래가 한 덩이로 보였다. 눌러야 열리게 둔다.
   여닫는 일은 <details> 가 하므로 스크립트가 없다 — 켜고 끄는 상태를 따로
   들고 있지 않으니 어긋날 자리도 없다. */
html.wzy-on details.helpThemeBlock > summary.helpSectionTitle{
  display:flex !important; align-items:center; gap:6px;
  margin:0 !important; padding:2px 0;
  cursor:pointer; list-style:none; user-select:none;
}
html.wzy-on details.helpThemeBlock > summary::-webkit-details-marker{ display:none }
/* 손잡이만 오른쪽 끝으로 — 빈 칸을 앞에 두면 갈래 이름까지 오른쪽으로 밀린다 */
html.wzy-on details.helpThemeBlock > summary.helpSectionTitle::after{
  content:'+';
  flex:0 0 auto; margin-left:auto; width:20px; height:20px;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:700; line-height:1;
  color:var(--ink); opacity:.55;
}
/* 마이너스 부호는 글자로 적지 않는다 — 저장 과정에서 깨진 전례가 있다 */
html.wzy-on details.helpThemeBlock[open] > summary.helpSectionTitle::after{ content:'\2212' }
html.wzy-on details.helpThemeBlock > summary.helpSectionTitle:hover::after{ opacity:.9 }
/* 접혀 있을 때는 갈래 이름만 남으므로 여백을 줄인다 */
html.wzy-on details.helpThemeBlock:not([open]){ padding:11px 12px !important }