/* 메뉴 슬라이더 · 입력 폼 · 궁합 · 타로 · 회원 등 확장 컴포넌트 */

/* ───── 상단 링크 · 메뉴 슬라이더 (그룹별 메뉴) ───── */
.top-actions { display: flex; align-items: center; gap: 10px; }
.join-link { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 1.5px solid var(--brand); color: var(--brand); font-weight: 700; font-size: 14px; text-decoration: none; }
.join-link:hover, .join-link.on { background: var(--brand); color: #fff; }
#menu { margin-top: 8px; }
.menu_area { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.menu_track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.menu_track::-webkit-scrollbar { display: none; }
.menu_slide { flex: 0 0 100%; scroll-snap-align: start; padding: 18px 18px 6px; }
.menu_tit { display: flex; align-items: center; gap: 10px; font: 700 18px/1.3 var(--sans); margin-bottom: 12px; }
.menu_ico { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); font-size: 22px; }
.menu_li { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.menu_li a { display: flex; align-items: center; min-height: 46px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--ink); font-weight: 500; background: var(--surface-2); }
.menu_li a:hover { border-color: var(--brand); }
.menu_li li.on a { background: var(--brand); color: #fff; border-color: var(--brand); font-weight: 700; }
.menu_num { display: flex; justify-content: center; align-items: center; gap: 14px; padding: 8px 0 12px; font-size: 14px; color: var(--muted); }
.menu_num button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-size: 16px; }
.menu_num button:hover { border-color: var(--brand); }

/* ───── 페이지 머리 · 개인정보 입력 ───── */
.unse_info { margin: 20px 0 6px; }
.unse_info h2 { font-size: clamp(22px, 5vw, 28px); }
.unse_txt { color: var(--muted); margin: 8px 0 4px; }
.txt_s { font-size: 14px; color: var(--muted); margin: 0; }
.txt_purple { color: var(--brand); font-weight: 700; }
.inp_area h3 { font-size: 19px; margin: 0 0 4px; }
.inp_ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 16px; }
.inp_li > .k { display: block; font-weight: 700; margin-bottom: 6px; }
.inp_row { display: grid; grid-template-columns: 1.15fr 1.1fr 1fr 1fr; gap: 8px; }
.inp_two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.inp_area .check { margin-top: 12px; }
.btn_area { margin-top: 22px; display: grid; gap: 10px; }
.hr-gap { margin-top: 26px; padding-top: 22px; border-top: 1px dashed var(--line); }
.inline-form { margin-top: 0; }

/* ───── 궁합 · 링 · 연간 차트 ───── */
.pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; text-align: center; }
.pair .who { padding: 12px 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.pair .who b { display: block; font-size: 17px; }
.pair .who .pn { font: 700 22px/1.3 var(--serif); }
.pair .heart { font-size: 26px; color: var(--seal); }
.ring { --p: 70; width: 140px; height: 140px; border-radius: 50%; background: conic-gradient(var(--brand) calc(var(--p) * 1%), var(--line) 0); display: grid; place-items: center; margin: 4px auto; }
.ring::before { content: ""; width: 112px; height: 112px; border-radius: 50%; background: var(--surface); grid-area: 1 / 1; }
.ring b { grid-area: 1 / 1; font-size: 34px; line-height: 1; }
.ring b small { font-size: 14px; font-weight: 500; }
.center { text-align: center; }
.cat-list { display: grid; gap: 12px; margin-top: 14px; }
.cat-row { display: grid; grid-template-columns: 110px 1fr auto; gap: 6px 10px; align-items: center; }
.cat-row .cd { font-size: 12.5px; color: var(--muted); grid-column: 1 / -1; margin-top: -2px; }
.cat-row .track { height: 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.cat-row .fill { display: block; height: 100%; background: var(--brand); border-radius: 999px; }
.points { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.points li { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border-left: 4px solid var(--line); font-size: 15px; }
.points li.good { border-left-color: var(--brand); }
.points li.care { border-left-color: var(--seal); }
.week-chart.y12 { grid-template-columns: repeat(12, 1fr); gap: 3px; }
.y12 .wcol { cursor: default; padding: 4px 0; }
.y12 .wcol:hover { background: none; }
.y12 .bar { width: min(22px, 80%); }
.y12 .dw { font-size: 12.5px; }
.y12 .wcol.now { background: var(--accent-soft); }
.organ { padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); display: grid; gap: 6px; }
.organ h3 { font: 700 16px/1.4 var(--sans); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.organ p { margin: 0; font-size: 15px; }
.badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.badge.warn { background: var(--el1-bg); color: var(--el1); }
.stack { display: grid; gap: 12px; }
.year-list { display: grid; gap: 8px; }
.year-row { display: grid; grid-template-columns: 96px 1fr auto; gap: 10px; align-items: center; font-size: 15px; }
.year-row.best { font-weight: 700; }
.year-row .track { height: 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.year-row .fill { display: block; height: 100%; background: var(--brand); border-radius: 999px; }
.animals { display: flex; flex-wrap: wrap; gap: 8px; }
.animal { padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); font-size: 14.5px; }
.animal b { display: block; font-size: 15.5px; }
.animal.bad { border-color: var(--seal); }

/* ───── 타로 ───── */
.tarot-row { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin: 18px 0 8px; }
.tslot { display: grid; gap: 8px; justify-items: center; }
.tslot .pos { font-size: 13px; font-weight: 700; color: var(--muted); }
.tcard { display: block; width: 150px; height: 261px; perspective: 900px; cursor: pointer; background: none; border: 0; padding: 0; }
.tcard-in { display: block; position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .7s; }
.tcard.flipped .tcard-in { transform: rotateY(180deg); }
.tface { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 14px; display: grid; place-items: center; padding: 10px; text-align: center; border: 2px solid var(--brand); box-shadow: var(--shadow); }
.tback { background: repeating-linear-gradient(45deg, var(--brand) 0 9px, #5238b8 9px 18px); color: #fff; font-size: 46px; }
.tfront { background: #f3ead2; transform: rotateY(180deg); padding: 0; overflow: hidden; }
.tfront img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tfront.rev img { transform: rotate(180deg); }
.tcap { font-size: 14px; font-weight: 700; text-align: center; visibility: hidden; }
.tcap em { font-style: normal; color: var(--seal); font-size: 12.5px; }
.tcard.flipped + .tcap { visibility: visible; }
.tmsg { padding: 14px 16px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.tmsg h3 { font: 700 17px/1.4 var(--sans); margin-bottom: 4px; }
.tmsg .kw { font-size: 13.5px; color: var(--brand); font-weight: 700; margin-bottom: 6px; }
.tmsg .timg { font-size: 14px; margin: 0 0 8px; padding: 8px 10px; border-radius: 10px; background: var(--surface); border: 1px dashed var(--line); }
/* 단계 표시 · 질문 */
.tsteps { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; counter-reset: none; }
.tsteps li { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); text-align: center; }
.tsteps li span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line); font-weight: 700; background: var(--surface); }
.tsteps li.done span { border-color: var(--accent); color: var(--accent); }
.tsteps li.on { color: var(--ink); font-weight: 700; }
.tsteps li.on span { background: var(--brand); border-color: var(--brand); color: #fff; }
/* 질문 입력칸: 카드 안에서 바로 눈에 띄도록 강조 상자 + 굵은 테두리 */
.tq-field { margin-top: 16px; padding: 14px; border-radius: 16px; background: var(--accent-soft); border: 2px solid var(--brand); }
.tq-label { display: block; font: 700 18px/1.3 var(--sans); margin: 0 0 8px; color: var(--ink); }
#tQ { width: 100%; min-height: 56px; padding: 12px 16px; font-size: 17px; font-weight: 500; color: var(--ink); background: var(--surface); border: 2px solid var(--brand); border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
#tQ::placeholder { color: var(--muted); opacity: 1; font-weight: 400; }
#tQ:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), 0 2px 8px rgba(0, 0, 0, .08); }
.tq-help { margin: 6px 2px 0; font-size: 13.5px; color: var(--muted); }
/* 카드 장수 4가지 */
.tcounts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tcounts span { text-align: center; justify-items: center; padding: 12px 6px; }
.tcnt-n { font-size: 22px; line-height: 1.1; color: var(--brand); }
.tcounts input:checked + span .tcnt-n { color: var(--ink); }
.tvars { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.thints p { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--accent-soft); font-size: 14px; }
.ttips { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.tq { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.tq-q { font-weight: 700; font-size: 16px; flex: 1 1 220px; }
/* 스프레드 선택 */
.tspreads { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.tspreads label { position: relative; cursor: pointer; }
.tspreads input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.tspreads span { display: grid; gap: 2px; height: 100%; padding: 10px 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); }
.tspreads b em { font-style: normal; font-size: 12.5px; color: var(--muted); font-weight: 500; }
.tspreads small { color: var(--muted); font-size: 13px; }
.tspreads input:checked + span { border-color: var(--brand); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--brand); }
.tspreads input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
/* 섞기 */
.tdeck { position: relative; width: 110px; height: 172px; margin: 30px auto 22px; }
.tdeck span { position: absolute; inset: 0; border-radius: 12px; border: 2px solid var(--brand); background: repeating-linear-gradient(45deg, var(--brand) 0 8px, #5238b8 8px 16px); box-shadow: var(--shadow); }
.tdeck span:nth-child(1) { transform: translate(-6px, 6px) rotate(-4deg); }
.tdeck span:nth-child(2) { transform: translate(-2px, 2px) rotate(-1deg); }
.tdeck span:nth-child(3) { transform: translate(3px, -2px) rotate(2deg); }
.tdeck.shuffling span:nth-child(1) { animation: tshufL .9s ease-in-out infinite; }
.tdeck.shuffling span:nth-child(2) { animation: tshufR .9s ease-in-out .45s infinite; }
.tdeck.shuffling span:nth-child(3) { animation: tshufR .9s ease-in-out infinite; }
.tdeck.shuffling span:nth-child(4) { animation: tshufU .9s ease-in-out .2s infinite; }
.tshuf-msg { text-align: center; font-weight: 700; font-size: 17px; margin: 0; }
.tdots::after { content: ''; display: inline-block; width: 1.5em; text-align: left; animation: tdots 1.2s steps(4) infinite; }
@keyframes tdots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
.tprog { height: 6px; max-width: 240px; margin: 14px auto 4px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.tprog span { display: block; height: 100%; width: 0; background: var(--brand); animation: tprog linear forwards; }
@keyframes tprog { to { width: 100%; } }
@keyframes tshufL { 0%, 100% { transform: translate(-6px, 6px) rotate(-4deg); } 40% { transform: translate(-70px, 0) rotate(-14deg); } }
@keyframes tshufR { 0%, 100% { transform: translate(3px, -2px) rotate(2deg); } 40% { transform: translate(70px, 4px) rotate(12deg); } }
@keyframes tshufU { 0%, 100% { transform: none; } 55% { transform: translateY(-40px) rotate(6deg); } }
/* 펼친 78장 — 겹쳐 놓고 왼쪽 가장자리를 눌러 고른다 */
.tfan { display: flex; flex-wrap: wrap; justify-content: center; padding: 18px 0 4px 22px; }
.tfan .tb { position: relative; width: 46px; height: 76px; margin: 0 0 10px -22px; padding: 0; border-radius: 7px; border: 1.5px solid var(--brand); background: repeating-linear-gradient(45deg, var(--brand) 0 5px, #5238b8 5px 10px); box-shadow: -2px 1px 4px rgba(0, 0, 0, .25); cursor: pointer; transition: transform .15s, opacity .15s; }
.tfan .tb:hover, .tfan .tb:focus-visible { transform: translateY(-6px); z-index: 1; }
.tfan .tb:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.tfan .tb[aria-pressed="true"] { transform: translateY(-14px); z-index: 2; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent), var(--shadow); }
.tfan .tb[data-n]::after { content: attr(data-n); position: absolute; top: -8px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 2px 6px; border-radius: 999px; background: var(--accent); color: #fff; font: 700 11px/1.3 var(--sans); }
/* 마음 상담: AI 상담 */
.chat-mode { display: grid; gap: 6px; margin-bottom: 12px; }
.chat-mode p { margin: 0; }
.ai-consent { margin-bottom: 14px; padding: 14px 16px; border-radius: 14px; background: var(--accent-soft); border: 2px solid var(--brand); font-size: 14.5px; }
.ai-consent ul { margin: 8px 0 12px; padding-left: 18px; display: grid; gap: 6px; }
.ai-consent-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-consent.nudge { animation: nudge .45s ease-in-out; }
@keyframes nudge { 0%, 100% { transform: none; } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.ai-badge { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 6px; background: var(--brand); color: #fff; font-size: 11px; line-height: 1.6; vertical-align: 1px; }
.msg .ai-body p { margin: 0 0 8px; }
.msg .ai-body ul { margin: 4px 0 8px; padding-left: 20px; display: grid; gap: 4px; }
.msg .ai-wait { color: var(--muted); margin: 0; }
.msg .ai-note { margin: 8px 0 0; padding: 6px 10px; border-radius: 8px; background: var(--accent-soft); font-size: 13.5px; }
.msg .ai-foot { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
.chat-form button:disabled { opacity: .55; cursor: wait; }
@media (prefers-reduced-motion: reduce) { .ai-consent.nudge { animation: none; } }
/* 카드 크게 보기: 마우스 미리보기(.tpeek) · 누르면 여는 창(.tzoom) */
.tarot-row .tcard.flipped, .tlay .tcard.flipped { cursor: zoom-in; }
.tpeek { position: fixed; z-index: 60; display: grid; gap: 6px; justify-items: center; padding: 8px; border-radius: 14px; background: var(--surface); border: 2px solid var(--brand); box-shadow: 0 12px 40px rgba(0, 0, 0, .35); pointer-events: none; opacity: 0; transform: scale(.96); transition: opacity .15s, transform .15s; }
.tpeek.on { opacity: 1; transform: none; }
.tpeek img, .tzoom img { display: block; width: auto; max-width: 100%; aspect-ratio: 300 / 522; border-radius: 8px; background: #f3ead2; }
.tpeek img.rev, .tzoom img.rev { transform: rotate(180deg); }
.tzoom-cap { font-weight: 700; font-size: 15px; text-align: center; }
.tzoom { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .72); cursor: zoom-out; }
.tzoom-in { display: grid; gap: 10px; justify-items: center; padding: 12px; border-radius: 16px; background: var(--surface); max-height: 100%; }
.tzoom img { height: min(522px, calc(100vh - 150px)); max-width: calc(100vw - 56px); object-fit: contain; }
.tzoom-close { min-width: 120px; }
@media (prefers-reduced-motion: reduce) { .tpeek { transition: none; } }
/* 타로 탭 (타로 보기 / 카드 도감 / 내 기록) */
.ttabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 5px; margin-bottom: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.ttabs button { min-height: 44px; border: 0; border-radius: 10px; background: none; cursor: pointer; font-weight: 500; color: var(--ink); }
.ttabs button:hover { background: var(--surface-2); }
.ttabs button[aria-selected="true"] { background: var(--brand); color: #fff; font-weight: 700; }
/* 질문 모음 · 이용 안내 */
.tqs { margin-top: 12px; display: grid; gap: 6px; }
.tqs .topic-chips button { min-height: 40px; padding: 6px 12px; font-size: 14px; text-align: left; }
.tqs .topic-chips em { font-style: normal; font-size: 12px; color: var(--brand); font-weight: 700; margin-left: 2px; }
.tabout { margin-top: 18px; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); font-size: 14.5px; }
.tabout summary { cursor: pointer; font-weight: 700; min-height: 32px; display: list-item; }
.tabout ul { margin: 8px 0 2px; padding-left: 18px; display: grid; gap: 6px; }
/* 해석 · 메모 · 복사 */
.ttopic { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--accent-soft); font-size: 14.5px; }
.tmemo { margin-top: 16px; display: grid; gap: 6px; }
.tmemo label { font-weight: 700; }
.tmemo textarea { width: 100%; font: inherit; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); resize: vertical; }
.tread-btns { grid-template-columns: 1fr 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }
/* 카드 도감 */
.tsuits { margin: 0 0 12px; padding-left: 18px; display: grid; gap: 4px; }
.tdict-filter { margin-bottom: 4px; }
.tdict { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; margin-top: 14px; }
.tdict button { display: grid; gap: 4px; justify-items: center; padding: 6px 4px 8px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface); cursor: pointer; font-size: 12.5px; line-height: 1.3; color: var(--ink); }
.tdict button:hover { border-color: var(--brand); }
.tdict button[aria-pressed="true"] { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); background: var(--accent-soft); font-weight: 700; }
.tdict img { width: 100%; aspect-ratio: 300 / 522; object-fit: cover; border-radius: 5px; background: #f3ead2; }
.tdetail { display: grid; grid-template-columns: 170px 1fr; gap: 16px; margin-top: 14px; padding: 14px; border-radius: 14px; border: 1.5px solid var(--brand); background: var(--surface-2); scroll-margin-top: 12px; }
.tdetail:focus { outline: none; }
.tdetail img { width: 100%; border-radius: 8px; box-shadow: var(--shadow); }
.tdetail h3 { font: 700 19px/1.35 var(--sans); margin: 0 0 4px; }
.tdetail h3 small { font-size: 13px; font-weight: 500; color: var(--muted); }
.tdetail h4 { font: 700 15px/1.4 var(--sans); margin: 12px 0 2px; }
.tdetail p { margin: 0; }
.tdetail .kw { color: var(--brand); font-weight: 700; margin-bottom: 8px; }
.ttopics { margin: 4px 0 0; padding-left: 0; list-style: none; display: grid; gap: 6px; }
/* 내 기록 */
.tlog { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tlog-item { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); display: grid; gap: 8px; }
.tlog-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.tlog-q { margin: 0; font-weight: 700; }
.tlog-cards { display: flex; flex-wrap: wrap; gap: 4px; }
.tlog-cards img { width: 38px; aspect-ratio: 300 / 522; object-fit: cover; border-radius: 4px; background: #f3ead2; }
.tlog-cards img.rev { transform: rotate(180deg); }
.tlog-memo { margin: 0; font-size: 14.5px; white-space: pre-wrap; }
.tlog-memo.muted { color: var(--muted); }
.tlog-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.tlog-btns .btn { min-height: 40px; padding: 6px 14px; font-size: 14px; }
@media (max-width: 620px) {
  .tdetail { grid-template-columns: 1fr; }
  .tdetail img { max-width: 170px; justify-self: center; }
  .tdict { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .tdict button { font-size: 11.5px; padding: 4px 2px 6px; }
  .ttabs button { font-size: 14px; padding: 0 4px; }
}
/* 스프레드 안내 · 양자택일 선택지 */
.tsp-note { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--accent-soft); font-size: 14px; }
.topts { margin-top: 12px; padding: 12px 14px; border-radius: 12px; border: 1.5px dashed var(--brand); }
.topt span { display: block; font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.topt input { width: 100%; }
/* 배열 모양 (양자택일 V자 · 켈틱 크로스) — 카드 크기는 칸 너비에 맞춤 */
.tlay { margin: 18px auto 8px; }
.tlay .tslot { min-width: 0; gap: 4px; }
.tlay .tcard { width: 100%; height: auto; aspect-ratio: 300 / 522; }
.tlay .tface { border-radius: 8px; }
.tlay .pos { font-size: 12px; line-height: 1.25; text-align: center; min-height: 2.5em; display: flex; align-items: flex-end; justify-content: center; }
.tlay .tcap { font-size: 12px; line-height: 1.3; }
.tchoice { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; max-width: 480px; align-items: start; }
.tchoice .p2 { grid-area: 1 / 1; }
.tchoice .p4 { grid-area: 1 / 4; }
.tchoice .p3 { grid-area: 2 / 2; }
.tchoice .p5 { grid-area: 2 / 3; }
.tchoice .p1 { grid-area: 3 / 2 / 4 / 4; justify-self: center; width: calc(50% - 6px); }
.tceltic { display: flex; gap: 14px; justify-content: center; align-items: center; max-width: 440px; }
.tcross { flex: 3 1 0; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: ". c3 ." "c5 c1 c6" ". c4 ."; gap: 8px; align-items: center; }
.tcross .p1, .tcross .p2 { grid-area: c1; }
.tcross .p3 { grid-area: c3; }
.tcross .p4 { grid-area: c4; }
.tcross .p5 { grid-area: c5; }
.tcross .p6 { grid-area: c6; }
/* 2번 카드는 1번 위에 가로로 겹쳐 놓는다 (이름표는 자리만 차지해 두 카드의 중심을 맞춤) */
.tcross .p2 { z-index: 2; transform: rotate(90deg) scale(.7); }
.tcross .p2 .pos, .tcross .p2 .tcap { visibility: hidden !important; }
.tstaff { flex: 1 1 0; min-width: 0; display: grid; gap: 8px; }
/* 양자택일 비교 */
.tcmp { display: grid; gap: 8px; }
.tcmp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1.5px solid var(--line); }
.tcmp-row small { color: var(--muted); font-weight: 700; font-size: 13px; }
.tcmp-bar { grid-column: 1 / -1; height: 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.tcmp-bar i { display: block; height: 100%; background: var(--h2); }
.tcmp-row.best { border-color: var(--h5); }
.tcmp-row.best .tcmp-bar i { background: var(--h5); }
.tcmp-row.best small { color: var(--seal); }
.tfan .tb.dim { opacity: .45; cursor: default; }
.tfan .tb.dim:hover { transform: none; }
.tpickcnt { margin: 6px 0 0; font-weight: 700; color: var(--brand); }
/* 해석 */
.tstory { margin-top: 16px; padding: 16px 18px; border-radius: 14px; background: var(--surface-2); border: 1.5px solid var(--brand); display: grid; gap: 8px; }
.tstory h3 { font: 700 18px/1.4 var(--sans); margin: 0; }
.tstory p { margin: 0; }
.tyn { padding: 12px 14px; border-radius: 12px; border-left: 6px solid var(--h3); background: var(--surface); }
.tyn b { font-size: 17px; }
.tyn p { margin: 4px 0 0; }
.tyn.good { border-left-color: var(--h5); }
.tyn.care { border-left-color: var(--h1); }
@media (prefers-reduced-motion: reduce) {
  .tdeck.shuffling span, .tdots::after { animation: none !important; }
  .tcard-in, .tfan .tb { transition: none; }
}

/* ───── 회원 ───── */
.notice { padding: 14px 16px; border-radius: 12px; background: var(--accent-soft); font-size: 14.5px; }
.people { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.people li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.people .del { border: 0; background: none; color: var(--seal); cursor: pointer; font-weight: 700; min-height: 40px; padding: 0 8px; }

@media (max-width: 620px) {
  .inp_row { grid-template-columns: 1fr 1fr; }
  .pair { grid-template-columns: 1fr; }
  .pair .heart { transform: rotate(90deg); }
  .cat-row { grid-template-columns: 84px 1fr auto; }
  .week-chart.y12 { gap: 1px; }
  .y12 .dw { font-size: 11px; }
  .tcard { width: 128px; height: 223px; }
  .tarot-row { gap: 10px; }
  .tarot-row.n3 .tcard { width: 92px; height: 160px; }
  .tarot-row.n3 .tcap { font-size: 12.5px; max-width: 92px; }
  .tfan { padding-left: 14px; }
  .tfan .tb { width: 38px; height: 62px; margin-left: -14px; }
  .tsteps li { font-size: 12px; }
  .tcounts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ───── 행운 번호 ───── */
.lotto { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.lotto li { display: grid; grid-template-columns: 22px repeat(6, minmax(0, 1fr)); align-items: center; gap: 6px; } /* 한 세트(6개)는 늘 한 줄 */
.lotto .lab { width: 22px; font-weight: 700; color: var(--muted); }
.lotto .ball { width: 100%; max-width: 44px; height: auto; aspect-ratio: 1; font-size: 16px; justify-self: center; }
.ball.lk { background: var(--surface); color: var(--brand); box-shadow: inset 0 0 0 3px var(--brand); }
@media (max-width: 620px) { .lotto .ball { font-size: 14px; } .lotto li { gap: 4px; } }

/* ───── 로고 이미지 ───── */
.brand-logo { width: 48px; height: 48px; border-radius: 50%; flex: none; object-fit: cover; box-shadow: 0 0 0 1px var(--line), 0 2px 8px rgba(20, 20, 50, .12); background: #fff; }

/* ───── 브랜드 이름: 붓글씨체 ───── */
.brand-text strong { font-family: "Nanum Brush Script", "Noto Serif KR", serif; font-weight: 400; font-size: 42px; line-height: 1; letter-spacing: .02em; }
.brand-text small { margin-top: 2px; }
@media (max-width: 620px) { .brand-text strong { font-size: 35px; } .top-inner { gap: 8px; } .join-link { padding: 6px 12px; } }

/* ───── 배경: 오래된 한지 위의 붓글씨 한자 ───── */
:root {
  --paper: #e8d8b4; --paper-hi: #f2e7ca; --paper-lo: #c9b083;
  --ink-hj: 36, 25, 16; --hj-alpha: .14; --hj-blend: multiply;
  --surface: #fbf6e8; --surface-2: #f4ecd7; --line: #d8c8a2; --muted: #6a604f;
  --shadow: 0 1px 2px rgba(80, 55, 20, .10), 0 8px 24px rgba(80, 55, 20, .10);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #241d14; --paper-hi: #31281b; --paper-lo: #140e08;
    --ink-hj: 236, 216, 170; --hj-alpha: .11; --hj-blend: screen;
    --surface: #2a231b; --surface-2: #322a20; --line: #4a3e2d; --ink: #f0e7d3; --muted: #b9ad95; --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 28px rgba(0, 0, 0, .3);
  }
}
:root[data-theme="dark"] {
  --paper: #241d14; --paper-hi: #31281b; --paper-lo: #140e08;
  --ink-hj: 236, 216, 170; --hj-alpha: .11; --hj-blend: screen;
  --surface: #2a231b; --surface-2: #322a20; --line: #4a3e2d; --ink: #f0e7d3; --muted: #b9ad95; --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 28px rgba(0, 0, 0, .3);
}
body { background: radial-gradient(ellipse 90% 70% at 50% 30%, var(--paper-hi) 0%, var(--paper) 58%, var(--paper-lo) 100%) fixed; }
.bg-hanja { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; user-select: none; -webkit-user-select: none;
  box-shadow: inset 0 0 120px 10px rgba(96, 62, 22, .38), inset 0 0 300px rgba(96, 62, 22, .16);
  background:
    radial-gradient(260px 200px at 18% 34%, rgba(120, 78, 30, .13), transparent 70%),
    radial-gradient(340px 260px at 82% 66%, rgba(120, 78, 30, .11), transparent 70%),
    radial-gradient(180px 150px at 62% 10%, rgba(120, 78, 30, .10), transparent 70%),
    radial-gradient(220px 180px at 10% 88%, rgba(120, 78, 30, .10), transparent 70%); }
.bg-hanja::before { content: ""; position: absolute; inset: 0; mix-blend-mode: multiply; opacity: .75;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='b' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .006' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55  0 0 0 0 .38  0 0 0 0 .16  0 0 0 1.1 -.42'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E"), url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008 .45' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45  0 0 0 0 .32  0 0 0 0 .17  1.5 0 0 0 -.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"), url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36  0 0 0 0 .25  0 0 0 0 .12  0 0 0 .6 -.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 900px 900px, 600px 600px, 320px 320px; }
:root[data-theme="dark"] .bg-hanja::before { opacity: .35; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bg-hanja::before { opacity: .35; } }
.hj { position: absolute; font-family: "Ma Shan Zheng", "Noto Serif KR", serif; color: rgba(var(--ink-hj), var(--hj-alpha)); mix-blend-mode: var(--hj-blend); line-height: 1.05; white-space: nowrap; animation: ink 2.4s ease-out both; }
.col-a, .col-b, .col-c, .col-d { writing-mode: vertical-rl; text-orientation: upright; letter-spacing: .08em; }
.col-a { left: 1.5vw; top: 4vh; font-size: clamp(64px, 10vw, 150px); }
.col-b { right: 1.5vw; top: 6vh; font-size: clamp(56px, 8.5vw, 130px); animation-delay: .25s; }
.col-c { left: 14vw; top: 46vh; font-size: clamp(30px, 3.6vw, 54px); animation-delay: .5s; }
.col-d { right: 14vw; top: 42vh; font-size: clamp(28px, 3.2vw, 48px); animation-delay: .7s; }
.big-1 { left: 8vw; bottom: -6vh; font-size: clamp(200px, 30vw, 420px); transform: rotate(-6deg); animation-delay: .3s; }
.big-2 { right: 6vw; top: 30vh; font-size: clamp(120px, 16vw, 240px); transform: rotate(5deg); animation-delay: .6s; }
.big-3 { left: 30vw; top: 62vh; font-size: clamp(110px, 14vw, 210px); transform: rotate(-3deg); animation-delay: .9s; }
.big-4 { right: 26vw; bottom: 2vh; font-size: clamp(100px, 12vw, 180px); transform: rotate(4deg); animation-delay: 1.1s; }
@keyframes ink { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: blur(0); } }
.top, #menu, main, .foot { position: relative; z-index: 1; }
.card, .menu_area { background-color: color-mix(in srgb, var(--surface) 93%, transparent); }
.menu_li a, .tmsg, .organ, .animal, .mini, .pair .who { border-color: var(--line); }
@media (max-width: 760px) {
  .hj { --hj-alpha: .12; }
  :root[data-theme="dark"] .hj { --hj-alpha: .13; }
  .col-c, .col-d { display: none; }
  .col-a { left: -2vw; font-size: 26vw; top: 2vh; }
  .col-b { right: -2vw; font-size: 22vw; top: 10vh; }
  .big-1 { left: -8vw; font-size: 78vw; bottom: -4vh; }
  .big-2 { right: -6vw; font-size: 42vw; top: 44vh; }
  .big-3, .big-4 { display: none; }
}
@media print { .bg-hanja { display: none; } }

/* 한자 위에 놓인 본문 글씨 가독성 */
.unse_info h1, .unse_txt, .unse_info .txt_s, .foot p { text-shadow: 0 0 8px var(--paper-hi), 0 0 2px var(--paper-hi); }
:root[data-theme="dark"] .unse_info h1, :root[data-theme="dark"] .unse_txt, :root[data-theme="dark"] .unse_info .txt_s, :root[data-theme="dark"] .foot p { text-shadow: none; }


/* ───── 가독성 보정: 밝은 화면(특히 스마트폰)에서 글씨가 또렷하도록 ───── */
:root { --paper: #efe4c8; --paper-hi: #f8f1dd; --paper-lo: #dac89c; --hj-alpha: .1; --ink: #1f1810; --muted: #4a4030; }
:root[data-theme="light"] { --paper: #efe4c8; --paper-hi: #f8f1dd; --paper-lo: #dac89c; --hj-alpha: .1; --ink: #1f1810; --muted: #4a4030; }
.bg-hanja { box-shadow: inset 0 0 90px 6px rgba(96, 62, 22, .24), inset 0 0 220px rgba(96, 62, 22, .1); }
.bg-hanja::before { opacity: .42; }
/* 제목·설명 글씨 밑에 종이색 받침을 깔아 배경 한자와 겹쳐도 읽히게 */
.unse_info { background: color-mix(in srgb, var(--paper-hi) 86%, transparent); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); border-radius: 14px; padding: 16px 18px; }
.unse_info h1 { color: var(--ink); }
.unse_txt, .unse_info .txt_s { color: var(--muted); text-shadow: none; }
.unse_info h1, .foot p { text-shadow: none; }
.foot p { color: var(--muted); }
.foot { background: color-mix(in srgb, var(--paper-hi) 80%, transparent); border-radius: 14px; padding: 14px 18px; margin-bottom: 40px; }
.txt_purple { color: #5a3bc4; }
@media (max-width: 760px) { :root { --hj-alpha: .09; } :root[data-theme="light"] .hj { --hj-alpha: .09; } }

/* 어두운 화면은 기존 대비 유지 */
:root[data-theme="dark"] { --ink: #f0e7d3; --muted: #cbbfa6; --hj-alpha: .11; }
:root[data-theme="dark"] .unse_info { background: color-mix(in srgb, var(--paper-hi) 70%, transparent); }
:root[data-theme="dark"] .foot { background: color-mix(in srgb, var(--paper-hi) 60%, transparent); }
:root[data-theme="dark"] .txt_purple { color: #c9b8ff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --ink: #f0e7d3; --muted: #cbbfa6; --hj-alpha: .11; }
  :root:not([data-theme="light"]) .unse_info { background: color-mix(in srgb, var(--paper-hi) 70%, transparent); }
  :root:not([data-theme="light"]) .foot { background: color-mix(in srgb, var(--paper-hi) 60%, transparent); }
  :root:not([data-theme="light"]) .txt_purple { color: #c9b8ff; }
}


/* ───── 달력: 음력 · 손 없는 날 · 절기 ───── */
.cell { position: relative; aspect-ratio: auto; min-height: 68px; gap: 1px; padding: 6px 2px; }
.cell .n { line-height: 1.1; }
.cell .lu { font-size: 10.5px; line-height: 1.1; opacity: .92; font-weight: 500; }
.cell .jg { font-size: 10px; font-weight: 700; line-height: 1.25; padding: 0 5px; border-radius: 6px; background: rgba(255, 255, 255, .68); color: #222; max-width: 100%; white-space: nowrap; }
.cell .jg.ev { color: #8a1010; }
/* 외국어로 번역되면 절기·명절 이름이 길어져(예: Chuseok (harvest festival)) 칸이 넓어지고 휴대폰에서 달력이 화면 밖으로 넘쳤다
   → 칸 너비를 7등분으로 고정(minmax(0,1fr))하고, 이름표는 칸 안에서 줄바꿈하되 두 줄까지만 보인다(전체 이름은 아래 상세의 칩에 나옴) */
.cal { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cell { min-width: 0; overflow: hidden; }
.cell .jg { white-space: normal; overflow-wrap: anywhere; word-break: keep-all; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; text-align: center; }
.cal .dow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.son { position: absolute; top: 5px; right: 5px; width: 9px; height: 9px; border-radius: 50%; background: #1f9d55; box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); }
.son.inline { position: static; display: inline-block; vertical-align: middle; margin-right: 2px; }
.son-chip { background: #dff3e6; color: #12703b; }
:root[data-theme="dark"] .son-chip { background: #183524; color: #7fe0a5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .son-chip { background: #183524; color: #7fe0a5; } }
@media (max-width: 620px) {
  .cell { min-height: 62px; padding: 5px 1px; }
  .cell .n { font-size: 15px; }
  .cell .lu { font-size: 10px; }
  .cell .jg { font-size: 9.5px; padding: 0 3px; }
  .son { top: 3px; right: 3px; width: 8px; height: 8px; }
}

.detail .chips { margin-bottom: 12px; }
#todayDetail .chips { margin-bottom: 4px; }

/* ───── 만세력 명식표 (평생운세 첫 카드) ───── */
.ms .ms-name { text-align: center; font-size: 26px; margin: 2px 0 12px; }
.ms .ms-name small { font-size: 18px; color: var(--muted); font-weight: 700; }
.ms-info { display: grid; grid-template-columns: auto 1fr auto; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--el1-bg); margin-bottom: 12px; }
.ms-info > div { padding: 8px 12px; display: grid; align-content: center; gap: 2px; }
.ms-g { font-weight: 700; border-right: 1px solid var(--line); }
.ms-d { font-size: 15px; font-weight: 500; }
.ms-jl { color: var(--el4); font-weight: 700; font-size: 14px; }
.ms-h { text-align: center; border-left: 1px solid var(--line); }
.ms-h b { font: 700 20px/1.2 var(--serif); }
.ms-h span { font-size: 13px; color: var(--muted); }
.ms-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.ms-col { display: grid; justify-items: center; gap: 6px; padding: 8px 4px 0; border-left: 1px solid var(--line); background: var(--surface-2); }
.ms-col:first-child { border-left: 0; }
.ms-tg { font-weight: 700; font-size: 16px; }
.ms-t { display: grid; place-items: center; width: 100%; max-width: 76px; aspect-ratio: 1; border-radius: 10px; font: 700 clamp(30px, 8.5vw, 46px)/1 var(--serif); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), 0 2px 3px rgba(60, 40, 10, .15); }
.ms-t.el0 { background: var(--el0-bg); } .ms-t.el1 { background: var(--el1-bg); } .ms-t.el2 { background: var(--el2-bg); } .ms-t.el3 { background: var(--el3-bg); } .ms-t.el4 { background: var(--el4-bg); }
.ms-t.me { box-shadow: 0 0 0 3px var(--accent), 0 2px 3px rgba(60, 40, 10, .15); }
.ms-t.q { background: var(--surface); color: var(--muted); border: 1.5px dashed var(--line); box-shadow: none; }
.ms-hid { width: 100%; text-align: center; font: 500 17px/1.6 var(--serif); letter-spacing: .12em; border-top: 1px solid var(--line); padding: 2px 0; color: var(--ink); }
.ms-lbl { width: 100%; text-align: center; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--line); padding: 3px 0; }
.ms-cnt { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin: 10px 0 4px; }
.ms-cnt span { text-align: center; padding: 6px 2px; font: 700 18px/1.3 var(--serif); color: var(--ink); border-left: 1px solid var(--line); }
.ms-cnt span:first-child { border-left: 0; }
.ms-cnt .el0 { background: var(--el0-bg); } .ms-cnt .el1 { background: var(--el1-bg); } .ms-cnt .el2 { background: var(--el2-bg); } .ms-cnt .el3 { background: var(--el3-bg); } .ms-cnt .el4 { background: var(--el4-bg); }
.ms-strip-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 14px 0 4px; font-size: 15px; }
.ms-strip-h span { font-size: 13px; color: var(--muted); }
.ms-strip { display: flex; flex-direction: row-reverse; gap: 3px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; }
.ms-strip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ms-cell { flex: 0 0 56px; display: grid; justify-items: center; gap: 3px; padding: 3px 2px; border-radius: 10px; }
.ms-cell .ms-t { font-size: 27px; max-width: 50px; border-radius: 8px; }
.ms-ct, .ms-cb { font-size: 14px; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.ms-cell.on.cur { background: #c2570c; }
.ms-cell.on.cur .ms-ct, .ms-cell.on.cur .ms-cb { color: #fff; }
.ms-cell.on.mon { box-shadow: inset 0 0 0 2.5px #2456d6; }
.ms-cell.on.mon .ms-ct { color: #fff; background: #2456d6; border-radius: 6px; padding: 0 6px; }
/* 대운 · 접목운 · 세운 칸 누르기 → 그해 세운 · 월운(보라 테두리 = 고른 해 · 그해의 대운) */
.ms-cell.pick { cursor: pointer; }
.ms-cell.pick:not(.on):hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.ms-cell.pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ms-cell.sel { box-shadow: inset 0 0 0 3px #7c3aed; }
.ms-cell.on.cur.sel { box-shadow: inset 0 0 0 3px #7c3aed, inset 0 0 0 5px #fff; }
.ms-selnote { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; border: 1.5px solid #7c3aed; background: color-mix(in srgb, #7c3aed 8%, transparent); font-size: 14px; line-height: 1.6; }
.ms-selnote .btn { margin-left: 6px; }
.ms-strip-h .ms-nav { margin-left: auto; display: inline-flex; gap: 4px; }
.ms-nb { min-width: 34px; min-height: 30px; border: 1px solid var(--field-border); border-radius: 8px; background: var(--field-bg); color: var(--ink); font-size: 13px; cursor: pointer; }
.ms-nb:hover { border-color: var(--accent); }

/* ───── 오행 상생·상극 그림 ───── */
.oh-wrap { display: grid; justify-items: center; }
.oh-svg { width: 100%; max-width: 420px; height: auto; }
.oh-c { stroke-width: 3; }
.oh-n.el0 .oh-c { fill: var(--el0-bg); stroke: var(--el0); } .oh-n.el1 .oh-c { fill: var(--el1-bg); stroke: var(--el1); } .oh-n.el2 .oh-c { fill: var(--el2-bg); stroke: var(--el2); } .oh-n.el3 .oh-c { fill: var(--el3-bg); stroke: var(--el3); } .oh-n.el4 .oh-c { fill: var(--el4-bg); stroke: var(--el4); }
.oh-n.zero .oh-c { stroke-dasharray: 6 5; }
.oh-me { fill: none; stroke: var(--accent); stroke-width: 3; }
.oh-t1 { font: 700 19px var(--sans); fill: var(--ink); text-anchor: middle; }
.oh-t2 { font: 500 14px var(--sans); fill: var(--ink); text-anchor: middle; }
.oh-yong, .oh-mel { font: 700 12.5px var(--sans); text-anchor: middle; }
.oh-yong { fill: var(--el1); } .oh-mel { fill: var(--accent); }
.oh-sg { stroke: #4a72c4; stroke-width: 3; marker-end: url(#ohA1); }
.oh-gk { stroke: #d2544a; stroke-width: 2; marker-end: url(#ohA2); opacity: .85; }
.oh-sg-h { fill: #4a72c4; } .oh-gk-h { fill: #d2544a; }
.oh-legend { display: flex; gap: 6px 16px; flex-wrap: wrap; justify-content: center; font-size: 14px; margin: 2px 0 10px; }
.oh-legend span::before { content: ''; display: inline-block; width: 22px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }
.oh-legend .sg::before { background: #4a72c4; } .oh-legend .gk::before { background: #d2544a; }
@media (max-width: 520px) {
  .ms-info { grid-template-columns: auto 1fr; }
  .ms-h { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); display: flex !important; gap: 8px; justify-content: center; align-items: baseline; }
  .ms-d { font-size: 14px; }
  .ms-tg { font-size: 14px; }
  .ms-hid { font-size: 15px; letter-spacing: .05em; }
  .ms-cnt span { font-size: 15px; }
  .ms-cell { flex-basis: 48px; }
  .ms-cell .ms-t { font-size: 23px; max-width: 44px; }
  .ms-ct, .ms-cb { font-size: 12.5px; }
}

/* ───── 명식표 감정용 표기(2026-10-17): 행 머리 + 4기둥 표, 운 칸의 십성 · 지장간 · 운성 · 신살 · 관계 ───── */
:root { --rel-hap: #1d4f9c; --rel-chung: #b3261e; --rel-etc: #2f6b3a; --star-gui: #9a6a00; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --rel-hap: #8fb6ff; --rel-chung: #ff9a8f; --rel-etc: #8fd6a0; --star-gui: #f0c45a; } }
:root[data-theme="dark"] { --rel-hap: #8fb6ff; --rel-chung: #ff9a8f; --rel-etc: #8fd6a0; --star-gui: #f0c45a; }
.ms-toggle { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13.5px; margin: -4px 0 10px; cursor: pointer; }
.ms-toggle input { width: 18px; height: 18px; accent-color: var(--accent); }
.ms-grid { grid-template-columns: 2.9em repeat(4, minmax(0, 1fr)); background: var(--surface-2); }
.ms-rh { display: grid; place-items: center; font-size: 11.5px; font-weight: 700; color: var(--muted); text-align: center; line-height: 1.15; padding: 4px 2px; border-top: 1px solid var(--line); background: var(--el1-bg); word-break: keep-all; }
.ms-c { display: grid; place-items: center; text-align: center; padding: 4px 3px; border-left: 1px solid var(--line); border-top: 1px solid var(--line); min-width: 0; }
.ms-grid > .ms-rh:first-child, .ms-grid > .ms-rh:first-child ~ .ms-c:nth-child(-n+5) { border-top: 0; }
.ms-c.tg { font-weight: 700; font-size: 16px; }
.ms-c.tile { padding: 5px 4px; }
.ms-c.unk { color: var(--muted); font-size: 13px; }
.ms-c.hid { display: flex; justify-content: center; gap: 2px; flex-wrap: wrap; }
.ms-hs { display: grid; justify-items: center; line-height: 1.15; min-width: 0; }
.ms-hs b { font: 700 17px/1.2 var(--serif); }
.ms-hs i { font-style: normal; font-size: 11px; color: var(--muted); white-space: nowrap; }
.ms-c.sm { font-size: 14px; font-weight: 600; }
.ms-c.chips { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 2px; min-height: 30px; }
.ms-c.lbl { font-size: 12.5px; color: var(--muted); padding: 3px 0; }
.ms-none { color: var(--muted); }
.ms-rel, .ms-star { display: inline-block; font-size: 11px; font-weight: 700; line-height: 1.2; padding: 1px 4px; border-radius: 5px; border: 1px solid currentColor; white-space: nowrap; background: var(--surface); }
.ms-rel.hap { color: var(--rel-hap); } .ms-rel.chung { color: var(--rel-chung); } .ms-rel.etc { color: var(--rel-etc); }
.ms-star { color: var(--ink); border-color: var(--line); }
.ms-star.gui { color: var(--star-gui); border-color: var(--star-gui); }
.ms-star.gm { color: var(--muted); border-style: dashed; }
.ms-sum { display: grid; gap: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin: 8px 0 6px; font-size: 14px; }
.ms-sum > div { display: grid; grid-template-columns: 5.6em 1fr; border-top: 1px solid var(--line); }
.ms-sum > div:first-child { border-top: 0; }
.ms-sum b { background: var(--el1-bg); padding: 6px 8px; display: grid; align-items: center; font-size: 13px; }
.ms-sum span { padding: 6px 10px; min-width: 0; }
.ms-sum em { font-style: normal; font-weight: 700; color: var(--accent); }
.ms-sum small { color: var(--muted); font-size: 12px; }
.ms-nrel { display: flex; flex-wrap: wrap; gap: 4px; }
.ms-nrel .ms-rel { font-size: 12.5px; padding: 2px 6px; }
.ms-cell { flex-basis: 58px; align-content: start; }
.ms-ctg { font-size: 12px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.ms-chid { font: 600 13px/1.2 var(--serif); letter-spacing: .02em; color: var(--ink); }
.ms-cs { font-size: 11.5px; line-height: 1.2; white-space: nowrap; color: var(--ink); }
.ms-cr { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ms-cr .ms-rel, .ms-cr .ms-star { font-size: 10.5px; padding: 0 3px; }
.ms-badge { font-size: 10.5px; font-weight: 700; line-height: 1.3; padding: 0 4px; border-radius: 5px; background: var(--el1-bg); color: var(--ink); white-space: nowrap; }
.ms-badge.jm { background: #6b3fa0; color: #fff; }
.ms-badge.empty { visibility: hidden; } /* 배지 없는 칸도 같은 높이를 차지해 간지 글자가 가로로 줄 맞춤 */
.ms-cell.on.cur .ms-ctg, .ms-cell.on.cur .ms-chid, .ms-cell.on.cur .ms-cs { color: #fff; }
.ms-key { font-size: 13px; line-height: 1.7; border: 1px dashed var(--line); border-radius: 10px; padding: 8px 10px; margin: 10px 0 4px; }
.ms-key .ms-rel, .ms-key .ms-star { font-size: 11.5px; }
.ms.simple .ms-x, .ms.simple .ms-c.x, .ms.simple .ms-badge { display: none; }
.ms.simple .ms-cell { flex-basis: 56px; }
@media (max-width: 520px) {
  .ms-grid { grid-template-columns: 2.5em repeat(4, minmax(0, 1fr)); }
  .ms-rh { font-size: 10.5px; padding: 3px 1px; }
  .ms-c.tg { font-size: 14px; }
  .ms-c.sm { font-size: 12.5px; }
  .ms-hs b { font-size: 15px; }
  .ms-hs i { font-size: 9.5px; letter-spacing: -.03em; }
  .ms-c.hid { gap: 1px; }
  .ms-rel, .ms-star { font-size: 10px; padding: 0 3px; }
  .ms-cell { flex-basis: 52px; }
  .ms.simple .ms-cell { flex-basis: 48px; }
  .ms-sum > div { grid-template-columns: 4.8em 1fr; }
}

/* ───── 평생운세: 체계적 감정 섹션 ───── */
.dsec { padding-top: 18px; }
.ds-head { display: flex; gap: 12px; align-items: center; padding-bottom: 12px; margin-bottom: 6px; border-bottom: 2px solid var(--ink); }
.ds-n { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent); color: var(--surface); font: 800 20px/1 var(--sans); }
.ds-head h2 { margin: 0; font-size: 20px; line-height: 1.3; }
.ds-head p { margin: 2px 0 0; font-size: 14px; color: var(--muted); }
.ds-sub { display: flex; align-items: center; gap: 8px; font: 700 17px/1.4 var(--sans); margin: 20px 0 8px; }
.ds-sub span { flex: none; white-space: nowrap; font-size: 12.5px; font-weight: 800; color: var(--accent); background: var(--accent-soft); border-radius: 6px; padding: 2px 7px; }
.lead-line { font-size: 16px; font-weight: 600; margin: 0 0 8px; }
.dtbl { width: 100%; border-collapse: collapse; margin: 6px 0 10px; font-size: 15px; }
.dtbl th, .dtbl td { border: 1px solid var(--line); padding: 7px 9px; text-align: left; vertical-align: middle; }
.dtbl th { background: var(--surface-2); white-space: nowrap; font-weight: 700; width: 1%; }
.dtbl thead th { width: auto; }
.dtbl.ctr th, .dtbl.ctr td { text-align: center; }
.dtbl tr.hl td, .dtbl td.hl { background: var(--accent-soft); font-weight: 700; }
.ox { font-weight: 600; } .ox.o { color: var(--el0); } .ox.x { color: var(--muted); }
.gy-badge { display: inline-block; font-size: 12.5px; font-weight: 800; color: #fff; background: #7a5200; border-radius: 6px; padding: 2px 8px; vertical-align: 2px; }
.yong4 { grid-template-columns: repeat(4, 1fr); }
.swatch { display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin-right: 6px; vertical-align: -2px; box-shadow: 0 0 0 1px var(--line); }
.rel-list { list-style: none; padding: 0; margin: 4px 0 8px; display: grid; gap: 8px; }
.rel-list li { padding: 8px 10px; border-radius: 10px; background: var(--surface-2); font-size: 15px; line-height: 1.6; }
.rtag { display: inline-block; font-size: 12.5px; font-weight: 800; border-radius: 6px; padding: 1px 7px; margin: 0 2px; }
.rtag.t-hap { background: var(--el0-bg); color: var(--el0); } .rtag.t-chung { background: var(--el1-bg); color: var(--el1); }
.yr-box { border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin: 8px 0; }
.yr-box p { margin: 6px 0; }
.nav-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
@media (max-width: 520px) {
  .yong4 { grid-template-columns: repeat(2, 1fr); }
  .ds-head h2 { font-size: 18px; }
  .dtbl { font-size: 14px; }
  .dtbl th, .dtbl td { padding: 6px 7px; }
}
/* 휴대폰: 외국어로 번역되면 표 머리칸(th)이 길어져(예: Eokbu (抑扶, strength balance)) 줄바꿈 없이 표를 화면 밖으로 밀어냈다
   → 좁은 화면에서는 머리칸도 줄바꿈, 긴 낱말은 끊어 넣고, 표 안 점수 막대는 줄인다 */
@media (max-width: 620px) {
  /* 머리칸은 낱말 단위로만 줄바꿈(anywhere 는 최소 폭이 한 글자가 되어 첫 열이 세로로 쪼개졌다) */
  .dtbl th { white-space: normal; }
  .dtbl tbody th { width: auto; min-width: 4.8em; max-width: 36vw; word-break: keep-all; overflow-wrap: break-word; }
  /* 내용 칸·머리 줄은 어디서든 줄바꿈 가능(일본어·중국어는 띄어쓰기가 없어 keep-all 이면 넘친다) */
  .dtbl td, .dtbl thead th { overflow-wrap: anywhere; word-break: normal; }
  :root[lang="ko"] .dtbl td { word-break: keep-all; }
  .dtbl.ctr, html:not([lang="ko"]) .dtbl { font-size: 13px; }
  .dtbl.ctr th, .dtbl.ctr td { padding: 5px 3px; }
  .dtbl .sbar, table .sbar { width: 64px; max-width: 64px; }
}
.dsec .scroll-x { overflow-x: auto; }
.nav-links .btn { min-height: 40px; padding: 8px 14px; font-size: 14px; }

/* ───── 메뉴 아이콘 타일 (img/menu/*.webp = tools/make-menu-icons.mjs 가 그림, 예전 그림은 assets-src/menu-old) ───── */
.menu_ico { overflow: hidden; background: transparent; }
.menu_ico img { width: 40px; height: 40px; display: block; border-radius: 12px; }
.menu_li { grid-template-columns: repeat(3, 1fr); gap: 10px 8px; }
.menu_li a { flex-direction: column; justify-content: flex-start; gap: 6px; min-height: 0; padding: 6px 4px 8px; border: 2px solid transparent; background: transparent; text-align: center; font-weight: 700; font-size: 14.5px; line-height: 1.3; word-break: keep-all; }
.menu_li a img { width: 100%; max-width: 104px; height: auto; aspect-ratio: 1; border-radius: 18px; box-shadow: 0 2px 6px rgba(60, 40, 10, .12); transition: transform .15s; }
.menu_li a:hover { border-color: transparent; }
.menu_li a:hover img { transform: translateY(-2px); }
.menu_li li.on a { background: var(--accent-soft); color: var(--ink); border-color: var(--brand); }
@media (min-width: 720px) { .menu_li { grid-template-columns: repeat(6, 1fr); } }
@media (prefers-reduced-motion: reduce) { .menu_li a img { transition: none; } }

/* ───── 메뉴 이전/다음: 청동 버튼(img/menu/nav-*.webp, assets-src/nav-buttons.jpg 에서 잘라 냄)을 아이콘 좌우에 ───── */
.menu_stage { position: relative; }
.menu_stage .menu_slide { padding-left: 62px; padding-right: 62px; }
.menu_nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; filter: drop-shadow(0 3px 5px rgba(60, 40, 10, .28)); transition: transform .15s, opacity .2s; }
.menu_nav img { width: 100%; height: 100%; display: block; border-radius: 50%; }
.menu_nav.prev { left: 6px; } .menu_nav.next { right: 6px; }
.menu_nav:hover { transform: translateY(-50%) scale(1.07); }
.menu_nav:active { transform: translateY(-50%) scale(.95); }
.menu_nav:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.menu_nav.dim { opacity: .35; }
.menu_num { padding: 0 0 12px; }
@media (max-width: 560px) {
  .menu_stage .menu_slide { padding-left: 44px; padding-right: 44px; }
  .menu_nav { width: 38px; height: 38px; }
  .menu_nav.prev { left: 3px; } .menu_nav.next { right: 3px; }
  .menu_li { gap: 8px 4px; }
  .menu_li a { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) { .menu_nav { transition: none; } }

/* ───── 입력칸이 배경과 뚜렷이 구분되도록 (테두리 대비 3:1 이상 · 카드와 다른 바탕) ───── */
:root { --field-border: #8f7b58; --field-bg: #fffdf8; --field-ph: #7a6d58; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --field-border: #9c8b6f; --field-bg: #17120c; --field-ph: #a89a82; } }
:root[data-theme="dark"] { --field-border: #9c8b6f; --field-bg: #17120c; --field-ph: #a89a82; }
input[type="text"], input[type="number"], input[type="time"], input[type="date"], input[type="email"], input[type="search"], input:not([type]), select, textarea, .tmemo textarea {
  border: 1.5px solid var(--field-border); background-color: var(--field-bg); color: var(--ink);
}
input::placeholder, textarea::placeholder { color: var(--field-ph); opacity: 1; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
/* 설명 글과 입력 칸의 이름표를 조금 더 또렷하게 */
.inp_li > .k, .inp_li > label.k { color: var(--ink); }
/* 어두운 모드의 회원가입 버튼 글자 */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .join-link:not(.on) { color: var(--accent); border-color: var(--accent); } }
:root[data-theme="dark"] .join-link:not(.on) { color: var(--accent); border-color: var(--accent); }
/* 작은 글자 대비 보정(4.5:1 이상) — 밝은 모드의 빨강·초록·인장색을 조금 진하게, 어두운 모드의 보라 글자는 밝게 */
:root { --el0: #2c7043; --el1: #a3321d; --seal: #a3261d; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ball.lk { color: var(--accent); box-shadow: inset 0 0 0 3px var(--accent); } }
:root[data-theme="dark"] .ball.lk { color: var(--accent); box-shadow: inset 0 0 0 3px var(--accent); }

/* ───── 세계의 부적 ───── */
.amu-row { display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: start; }
.amu-img svg { width: 100%; height: auto; display: block; }
.amu-name { margin: 0 0 4px; font-size: 18px; }
.amu-why { margin: 0 0 6px; font-weight: 700; color: var(--accent); }
.amu-txt p { margin: 0 0 6px; }
.amu-how { background: var(--surface-2); border-radius: 10px; padding: 8px 10px; font-size: 15px; }
.amu-filter { flex-wrap: wrap; margin-bottom: 14px; }
.amu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.amu-item { border: 1px solid var(--line); border-radius: 16px; padding: 12px; background: var(--surface-2); }
.amu-item .amu-img { width: 120px; margin: 0 auto 6px; }
.amu-item h3 { margin: 0; font-size: 17px; text-align: center; } .amu-item h3 small { display: block; font-size: 13px; font-weight: 500; color: var(--muted); }
.amu-en { margin: 0 0 6px; text-align: center; font-size: 13px; color: var(--muted); }
.amu-tags { text-align: center; margin: 0 0 8px; } .amu-item p { font-size: 15px; }
@media (max-width: 520px) { .amu-row { grid-template-columns: 88px 1fr; gap: 10px; } }
.amu a { color: var(--accent); font-weight: 700; }

/* ───── 오방색(五方色): 간지 글자의 배경 = 오행의 전통 색 (목 청 · 화 적 · 토 황 · 금 백 · 수 흑) ───── */
:root { --ob0: #145a74; --ob1: #a52a1d; --ob2: #f2c230; --ob3: #ffffff; --ob4: #1b1b1f; --ob0-t: #fff; --ob1-t: #fff; --ob2-t: #2a2008; --ob3-t: #1d1a15; --ob4-t: #fff; }
.ms-t.el0, .ms-cnt .el0 { background: var(--ob0) !important; color: var(--ob0-t) !important; }
.ms-t.el1, .ms-cnt .el1 { background: var(--ob1) !important; color: var(--ob1-t) !important; }
.ms-t.el2, .ms-cnt .el2 { background: var(--ob2) !important; color: var(--ob2-t) !important; }
.ms-t.el3, .ms-cnt .el3 { background: var(--ob3) !important; color: var(--ob3-t) !important; box-shadow: inset 0 0 0 1.5px #b9b09f, 0 2px 3px rgba(60, 40, 10, .15); }
.ms-t.el4, .ms-cnt .el4 { background: var(--ob4) !important; color: var(--ob4-t) !important; box-shadow: inset 0 0 0 1.5px #5d574c, 0 2px 3px rgba(60, 40, 10, .15); }
.ms-t.me { box-shadow: 0 0 0 3px var(--accent), 0 2px 3px rgba(60, 40, 10, .15) !important; }
.ms-t.gzt { display: inline-grid; width: 1.55em; max-width: none; height: 1.55em; aspect-ratio: auto; border-radius: 5px; font-size: 14px; box-shadow: none; vertical-align: middle; }
.ms-t.gzt.el3 { box-shadow: inset 0 0 0 1px #b9b09f; } .ms-t.gzt.el4 { box-shadow: inset 0 0 0 1px #5d574c; }
.gz { display: inline-flex; gap: 2px; vertical-align: middle; margin-right: 2px; }
.obang { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 8px 0 4px; }
.ob-i { display: flex; align-items: center; gap: 6px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); font-size: 12.5px; line-height: 1.35; }
.ob-i .ms-t.gzt { font-size: 16px; width: 1.7em; height: 1.7em; flex: none; }
.ob-i b { display: block; font-size: 13px; } .ob-i span:not(.ms-t) { color: var(--muted); }
.sixty { margin: 12px 0 0; } .sixty summary { cursor: pointer; font-weight: 700; padding: 8px 0; }
.sx-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin: 6px 0; }
.sx { display: grid; justify-items: center; gap: 2px; padding: 4px 1px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); font-size: 11.5px; }
.sx.mine { outline: 2.5px solid var(--accent); outline-offset: -1px; font-weight: 700; }
.sx.now { box-shadow: 0 0 0 2.5px #e8741e; }
.sx .ms-t.gzt { font-size: 13px; }
@media (max-width: 620px) {
  .obang { grid-template-columns: repeat(2, 1fr); } .obang .ob-i:last-child { grid-column: 1 / -1; }
  .sx-grid { grid-template-columns: repeat(5, 1fr); }
}
/* 오방색 안내·60갑자 표: 휴대폰에서 잘리지 않게 */
.sx-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.sx { min-width: 0; }
.sx .gz { gap: 1px; }
.sx .ms-t.gzt { font-size: 12px; width: 1.5em; height: 1.5em; }
@media (max-width: 620px) {
  .sx-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .obang { grid-template-columns: 1fr; gap: 4px; }
  .obang .ob-i:last-child { grid-column: auto; }
  .ob-i { padding: 5px 8px; }
  .ob-i > div { display: flex; flex-wrap: wrap; gap: 0 8px; align-items: baseline; }
  .ob-i b { display: inline; }
}

/* ───── 카드 도감: 그림 상징 공부 (팝업 .tstudy · 상세 안 .tst-inline) ───── */
.tstudy { position: fixed; z-index: 70; overflow: auto; padding: 14px 16px; border-radius: 16px; background: var(--surface); color: var(--ink); border: 2px solid var(--brand); box-shadow: 0 14px 44px rgba(0, 0, 0, .35); opacity: 0; pointer-events: none; transform: translateY(6px); transition: opacity .15s, transform .15s; }
.tstudy.on { opacity: 1; pointer-events: auto; transform: none; }
.tst-head { margin-bottom: 8px; } .tst-head b { font-size: 18px; } .tst-head .kw { margin: 2px 0 0; color: var(--accent); font-weight: 700; }
.tst-body { display: grid; grid-template-columns: minmax(180px, 250px) 1fr; gap: 14px; align-items: start; }
.tst-pic { position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }
.tst-pic img { display: block; width: 100%; height: auto; }
.tst-mk { position: absolute; transform: translate(-50%, -50%); width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #e8741e; color: #fff; font: 800 13px/1 var(--sans); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .45); cursor: default; transition: transform .12s; }
.tst-mk.on { transform: translate(-50%, -50%) scale(1.35); background: var(--brand); z-index: 2; }
.tst-text h4 { margin: 0 0 6px; font-size: 15px; } .tst-text h4 + * { margin-top: 0; }
.tst-list { margin: 0 0 12px; padding-left: 22px; display: grid; gap: 5px; font-size: 14.5px; line-height: 1.55; }
.tst-list.minor { list-style: none; padding-left: 0; }
.tst-list li { padding: 3px 6px; border-radius: 8px; }
.tst-list li::marker { font-weight: 800; color: #c2570c; }
.tst-list li.on { background: var(--accent-soft); }
.tst-ud { margin: 0 0 6px; font-size: 14.5px; } .tst-ud span { font-weight: 700; margin-right: 4px; }
.tst-how { margin: 8px 0 0; padding-left: 20px; font-size: 13.5px; color: var(--muted); display: grid; gap: 2px; }
.tst-tip { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); text-align: right; }
.tst-inline { margin: 12px 0 4px; border: 1px solid var(--line); border-radius: 14px; padding: 8px 12px; background: var(--surface-2); }
.tst-inline summary { cursor: pointer; font-weight: 700; padding: 4px 0; }
.tst-inline .tst { margin-top: 8px; }
@media (max-width: 620px) { .tst-body { grid-template-columns: 1fr; } .tst-pic { max-width: 280px; margin: 0 auto; } .tst-mk { width: 22px; height: 22px; font-size: 12px; } }

/* 펼친 카드의 공부 팝업: 자리 · 뽑힌 방향 */
.tst-pos { display: inline-block; font-size: 13px; font-weight: 800; color: #fff; background: var(--brand); border-radius: 999px; padding: 2px 10px; margin: 0 4px 4px 0; }
.tst-dir { display: inline-block; font-size: 13px; font-weight: 700; border-radius: 999px; padding: 2px 10px; margin: 0 0 4px; background: var(--el0-bg); color: var(--el0); }
.tst-dir.rev { background: var(--el1-bg); color: var(--el1); }
.tst-pic.rev img { transform: rotate(180deg); }
.tst-ud.now { background: var(--accent-soft); border-radius: 8px; padding: 6px 8px; }

/* ───── 타로: 주제 → 질문 유형(전용 스프레드) → 자리에 놓기 → 순서대로 뒤집기 ───── */
.tqtypes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; margin: 6px 0 14px; }
.tqtype { display: grid; gap: 3px; text-align: left; padding: 11px 13px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface-2); color: var(--ink); font: inherit; cursor: pointer; }
.tqtype:hover { border-color: var(--brand); }
.tqtype[aria-pressed="true"] { border: 2px solid var(--brand); background: var(--accent-soft); }
.tqt-q { font-weight: 700; font-size: 15.5px; }
.tqt-sp { font-size: 13px; font-weight: 700; color: var(--accent); }
.tqt-pos { font-size: 12.5px; color: var(--muted); }
.tsel-sp { border: 1.5px solid var(--brand); border-radius: 14px; padding: 12px 14px; background: var(--surface-2); }
.tsel-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; } .tsel-h b { font-size: 17px; }
.tsel-pos { margin: 8px 0 0; padding-left: 22px; display: grid; gap: 3px; font-size: 14.5px; }
.tsel-pos li::marker { font-weight: 800; color: var(--accent); }
.tsp-more { margin: 10px 0 0; } .tsp-more summary { cursor: pointer; font-weight: 700; color: var(--accent); padding: 4px 0; }
.tdedi { margin-top: 10px; }
.tslots { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 12px 0 6px; }
.tsl { display: grid; justify-items: center; gap: 4px; width: 74px; }
.tsl-c { display: grid; place-items: center; width: 52px; height: 80px; border-radius: 8px; border: 2px dashed var(--line); color: var(--muted); font-weight: 800; font-size: 18px; background: var(--surface); }
.tsl.on .tsl-c { border: 2px solid var(--brand); background: linear-gradient(135deg, #4b3a8f, #7d5fd6); color: #fff; font-size: 28px; }
.tsl.next .tsl-c { border-color: var(--brand); box-shadow: 0 0 0 3px var(--accent-soft); color: var(--accent); }
.tsl small { font-size: 12px; text-align: center; line-height: 1.3; color: var(--muted); }
.tsl.on small, .tsl.next small { color: var(--ink); font-weight: 700; }
.tflip-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 12px 0 0; }
.tmsg-pos { margin: 0 0 6px; font-size: 14px; color: var(--muted); }

/* ───── 행운 아이템: 실제 색 · 나침반 · 시계 ───── */
.lk-colors { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.lk-color { display: inline-grid; place-items: center; min-width: 64px; min-height: 40px; padding: 4px 14px; border-radius: 12px; font-weight: 800; font-size: 16px; box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .18), 0 2px 5px rgba(0, 0, 0, .15); }
.lk-wide { grid-column: 1 / -1; }
.lk-vis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 6px; }
.lk-vis figure { margin: 0; display: grid; justify-items: center; gap: 4px; text-align: center; }
.lk-vis figcaption { font-size: 13px; color: var(--muted); font-weight: 700; }
.lk-vis b { font-size: 15px; }
.lk-svg { width: 100%; max-width: 150px; height: auto; }
.cp-ring { fill: #b08d57; } .cp-face { fill: #fbf6ea; stroke: #7a5c30; stroke-width: 1; }
.cp-hl { fill: rgba(211, 47, 47, .22); stroke: #d32f2f; stroke-width: 1; }
.cp-tick { stroke: #7a5c30; stroke-width: 1.2; }
.cp-lab { font: 800 11px var(--sans); fill: #5b4a33; text-anchor: middle; } .cp-lab.on { fill: #c62828; font-size: 13px; }
.cp-needle { fill: #d32f2f; stroke: #7f1d1d; stroke-width: .8; } .cp-hub { fill: #3b2f22; }
.ck-ring { fill: #3b2f22; } .ck-face { fill: #fffdf6; }
.ck-hl { fill: rgba(246, 176, 26, .45); stroke: #e0930a; stroke-width: 1; }
.ck-t { stroke: #8a7a66; stroke-width: .6; } .ck-t5 { stroke: #3b2f22; stroke-width: 1.6; }
.ck-num { font: 700 9.5px var(--sans); fill: #221a12; text-anchor: middle; }
.ck-h { stroke: #221a12; stroke-width: 3.2; stroke-linecap: round; } .ck-m { stroke: #221a12; stroke-width: 1.8; stroke-linecap: round; } .ck-hub { fill: #c62828; }
.dtbl .lk-vis { max-width: 340px; }
.ck-ring { stroke: #b08d57; stroke-width: 2; }
.cp-lab { paint-order: stroke; stroke: #fbf6ea; stroke-width: 3px; }

/* ───── 점수: 별 대신 가로 막대 + 점수 (운세 점수 스펙트럼 색) ───── */
.sbar { position: relative; display: inline-flex; align-items: center; width: 100%; max-width: 240px; height: 26px; border-radius: 999px; overflow: hidden; vertical-align: middle; background: color-mix(in srgb, var(--sb) 24%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sb) 45%, transparent); }
.sbar i { display: flex; align-items: center; justify-content: flex-end; height: 100%; min-width: 2.8em; padding: 0 9px; border-radius: 999px; background: var(--sb); color: var(--sbt); box-sizing: border-box; }
.sbar b { font: 800 14px/1 var(--sans); font-variant-numeric: tabular-nums; }
.sbar em { position: absolute; right: 9px; font: 700 11.5px/1 var(--sans); font-style: normal; color: var(--muted); }
.sbar.b1 { --sb: var(--h1); --sbt: var(--h1-t); } .sbar.b2 { --sb: var(--h2); --sbt: var(--h2-t); } .sbar.b3 { --sb: #d9b43a; --sbt: #2a2108; } .sbar.b4 { --sb: var(--h4); --sbt: var(--h4-t); } .sbar.b5 { --sb: var(--h5); --sbt: var(--h5-t); }
.sbar.sm { max-width: 170px; height: 22px; } .sbar.sm b { font-size: 12.5px; } .sbar.sm em { font-size: 10.5px; right: 7px; }
.dtbl .sbar, .tbl .sbar, table .sbar { width: 120px; max-width: 120px; height: 20px; } table .sbar b { font-size: 12px; } table .sbar em { display: none; }
h3 .sbar { width: 150px; }
.total-row .sbar { max-width: 260px; height: 30px; } .total-row .sbar b { font-size: 16px; }

/* ───── 띠 캐릭터 카드 (잘 맞는 띠 · 부딪히기 쉬운 띠) ───── */
.animals { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.animal { position: relative; display: grid; justify-items: center; text-align: center; gap: 2px; padding: 12px 8px 10px; border: 2px solid var(--line); border-radius: 16px; background: var(--surface-2); font-size: 13.5px; }
.animal.good { border-color: #d9a441; background: linear-gradient(180deg, rgba(255, 214, 102, .22), transparent 60%), var(--surface-2); }
.animal.bad { border-color: var(--seal); border-style: dashed; }
.animal .zd-pic { display: block; width: 84px; height: 84px; transition: transform .25s; }
.animal .zd-pic svg { width: 100%; height: 100%; display: block; }
.animal.good:hover .zd-pic { transform: translateY(-4px) rotate(-4deg); }
.animal.bad:hover .zd-pic { animation: zd-shake .5s; }
@keyframes zd-shake { 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .animal .zd-pic { transition: none; } .animal.bad:hover .zd-pic { animation: none; } }
.animal b { display: block; font-size: 16px; margin-top: 2px; }
.animal .zd-nick { font-size: 12.5px; font-weight: 700; color: var(--brand); }
.animal .zd-yr { font-size: 12.5px; color: var(--muted); }
.animal .zd-tag { position: absolute; top: 6px; left: 6px; font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: #fff3c4; color: #6b4a00; }
.animal.bad .zd-tag { background: var(--el1-bg); color: var(--el1); }
@media (max-width: 420px) { .animals { grid-template-columns: repeat(2, minmax(0, 1fr)); } .animal .zd-pic { width: 72px; height: 72px; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .animal .zd-nick { color: var(--accent); } :root:not([data-theme="light"]) .animal.good { border-color: #b88a2e; } }
:root[data-theme="dark"] .animal .zd-nick { color: var(--accent); } :root[data-theme="dark"] .animal.good { border-color: #b88a2e; }
.animal { align-content: start; padding-top: 30px; }
.animal .zd-yr span { white-space: nowrap; }

/* 띠 목록 머리: 캐릭터 + 같은 크기의 제목 */
.zd-head { display: flex; align-items: center; gap: 8px; margin: 14px 0 10px; font-size: 18px; font-weight: 800; }
.zd-head.bad { margin-top: 22px; color: var(--el1); }
.zd-head.good { color: #9a3412; }
.zd-hic { width: 40px; height: 40px; flex: none; }
.zd-hic svg { width: 100%; height: 100%; display: block; }
.zd-head.bad .zd-hic { animation: zd-punch 1.6s ease-in-out infinite; }
.zd-head.good .zd-hic { animation: zd-beat 1.6s ease-in-out infinite; }
@keyframes zd-punch { 0%, 70%, 100% { transform: translateX(0) rotate(0); } 80% { transform: translateX(5px) rotate(-8deg); } 90% { transform: translateX(-2px) rotate(3deg); } }
@keyframes zd-beat { 0%, 60%, 100% { transform: scale(1); } 70% { transform: scale(1.12); } 80% { transform: scale(.97); } }
@media (prefers-reduced-motion: reduce) { .zd-head .zd-hic { animation: none !important; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .zd-head.good { color: #ffb38a; } }
:root[data-theme="dark"] .zd-head.good { color: #ffb38a; }

/* ───── 부적 이미지 PDF 저장 (한국 부적) ───── */
.amu-pdf { margin-top: 8px; font-size: 14.5px; }
#printAmu { display: none; }
@media print {
  body.print-amu > *:not(#printAmu) { display: none !important; }
  body.print-amu #printAmu { display: block; color: #1d1a15; font-family: 'Noto Sans KR', sans-serif; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pa-page { width: 186mm; }
  .pa-head { display: flex; justify-content: space-between; font-size: 10pt; color: #5b4a33; border-bottom: 1px solid #c8b58a; padding-bottom: 2mm; }
  .pa-head b { font-family: 'Nanum Brush Script', cursive; font-size: 16pt; color: #6a4bd6; }
  #printAmu h1 { font-size: 20pt; margin: 5mm 0 4mm; }
  #printAmu h1 small { font-size: 11pt; color: #5b4a33; font-weight: 500; margin-left: 2mm; }
  .pa-main { display: grid; grid-template-columns: 78mm 1fr; gap: 8mm; align-items: start; }
  .pa-big svg, .pa-big img { width: 78mm; height: 127.5mm; display: block; }
  .pa-txt { font-size: 11pt; line-height: 1.8; }
  .pa-txt p { margin: 0 0 4mm; }
  .pa-note { font-size: 9pt; color: #5b4a33; border-top: 1px dashed #c8b58a; padding-top: 3mm; }
  .pa-cut-title { font-size: 10pt; margin: 7mm 0 3mm; color: #5b4a33; }
  .pa-cuts { display: flex; gap: 6mm; }
  .pa-cut { width: 54mm; height: 86mm; border: 1.2px dashed #8f7b58; box-sizing: border-box; padding: 3mm; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1mm; break-inside: avoid; }
  .pa-cut svg, .pa-cut img { width: 43mm; height: 70mm; display: block; }
  .pa-cut span { font-size: 8pt; color: #5b4a33; }
  .pa-wish { justify-content: flex-start; align-items: stretch; padding: 5mm; }
  .pa-wish b { font-size: 11pt; text-align: center; margin-bottom: 4mm; color: #b3261e; }
  .pa-wish i { display: block; border-bottom: 1px solid #c8b58a; height: 11mm; }
  .pa-wish span { margin-top: auto; text-align: right; }
}

/* ───── 토정비결 ───── */
.tj-pick { display: grid; gap: 6px; }
.tj-pick select { max-width: 320px; font-size: 16px; padding: 10px 12px; border: 1.5px solid var(--field-border); border-radius: 12px; background: var(--field-bg); color: var(--ink); }
.tj-hero { text-align: center; }
.tj-code { display: flex; justify-content: center; gap: 10px; margin: 6px 0 12px; }
.tj-code span { display: grid; justify-items: center; width: 64px; padding: 8px 0 6px; border: 2px solid #a52a1d; border-radius: 10px; background: #fbf1d6; color: #7a1b12; }
.tj-code b { font-size: 30px; line-height: 1.1; font-family: 'Noto Serif KR', serif; }
.tj-code small { font-size: 12px; font-weight: 700; }
.tj-title { font-size: 21px; margin: 0 0 4px; line-height: 1.45; }
.tj-sym { font-size: 26px; color: #a52a1d; vertical-align: -2px; }
.tj-theme { font-size: 18px; font-weight: 800; color: var(--seal); margin: 0 0 12px; }
.tj-verse { display: inline-block; margin: 0 auto 10px; padding: 12px 22px; border-top: 2px solid #a52a1d; border-bottom: 2px solid #a52a1d; }
.tj-verse p { margin: 0; }
.tj-verse p:first-child { font-size: 24px; letter-spacing: .18em; font-weight: 700; color: #7a1b12; }
.tj-how { text-align: left; margin-top: 8px; }
.tj-how summary { cursor: pointer; font-weight: 700; color: var(--brand); min-height: 44px; display: flex; align-items: center; justify-content: center; }
.tj-how th { white-space: nowrap; }
.tj-h { font-size: 16.5px; margin: 14px 0 4px; color: var(--seal); }
.tj-total { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-weight: 800; }
.tj-fields { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.tj-field { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--surface-2); }
.tj-fh { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.tj-field p { margin: 0; }
.tj-months { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.tj-m { border: 1px solid var(--line); border-left: 5px solid var(--h3); border-radius: 10px; padding: 10px 12px; background: var(--surface-2); }
.tj-m.hi { border-left-color: var(--h5); } .tj-m.lo { border-left-color: var(--h1); }
.tj-mh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tj-mh b { font-size: 16px; min-width: 52px; }
.tj-mh .sbar { margin-left: auto; }
.tj-m p { margin: 6px 0 0; }
.tj-do { margin: 0; padding-left: 22px; } .tj-do li { margin: 4px 0; font-weight: 700; }
.tj-note { margin: 4px 4px 0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tj-code span { background: #3a2a1c; color: #ffd9a0; border-color: #e0795f; } :root:not([data-theme="light"]) .tj-verse p:first-child, :root:not([data-theme="light"]) .tj-sym { color: #ffb38a; } :root:not([data-theme="light"]) .tj-verse { border-color: #e0795f; } }
:root[data-theme="dark"] .tj-code span { background: #3a2a1c; color: #ffd9a0; border-color: #e0795f; } :root[data-theme="dark"] .tj-verse p:first-child, :root[data-theme="dark"] .tj-sym { color: #ffb38a; } :root[data-theme="dark"] .tj-verse { border-color: #e0795f; }

/* 한국 부적 먼저 */
.amu-sub { margin: 14px 0 8px; padding-top: 12px; border-top: 1px dashed var(--line); font-weight: 800; font-size: 15px; }
.amu-item.amu-first { position: relative; border: 2px solid #c89b20; }
.amu-badge { position: absolute; top: 8px; left: 8px; font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: #fff3c4; color: #6b4a00; }

/* 함께 지니면 좋은 한국 부적 */
.kor-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.kor-item { border: 1.5px solid #c89b20; border-radius: 14px; padding: 12px; background: var(--surface-2); display: grid; align-content: start; gap: 4px; }
.kor-item .amu-img { width: 104px; height: 104px; margin: 0 auto 4px; }
.kor-item .amu-img svg { width: 100%; height: 100%; }
.kor-item h3 { font-size: 16.5px; margin: 0; text-align: center; }
.kor-item h3 small { font-size: 13px; color: var(--seal); font-weight: 700; }
.kor-item p { margin: 0; font-size: 14.5px; }
.kor-item .amu-pdf { width: 100%; }

/* ───── 모든 PDF(인쇄) = 전통 한지 배경 (js/hanji.js) ─────
 * 쪽 여백은 0 으로 두고 html 배경에 한지를 깔아(print-color-adjust: exact) 「배경 그래픽」을 꺼도 종이 끝까지 한지가 찍힌다.
 * 여백은 body 안쪽 여백 + box-decoration-break: clone 으로 쪽마다 반복. */
@page { size: A4; margin: 0; }
@media print {
  html { background: #f4ecda var(--hanji, none) repeat !important; background-size: 384px 384px !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { background: transparent !important; padding: 12mm !important; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
  body::before, body::after { display: none !important; }
}

/* ───── 올해 건강운: 장기 캐릭터 (js/organs.js) ───── */
.organ.og { display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: center; }
.og-char { display: grid; justify-items: center; text-align: center; gap: 2px; }
.og-pic { display: block; width: 104px; height: 104px; }
.og-pic svg { width: 100%; height: 100%; display: block; }
.organ.og .og-pic { animation: og-wobble 2.4s ease-in-out infinite; }
@keyframes og-wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .organ.og .og-pic { animation: none; } }
.og-nick { font-size: 14.5px; color: var(--brand); }
.og-say { position: relative; display: inline-block; margin-top: 4px; padding: 5px 10px; border-radius: 12px; background: var(--surface); border: 1.5px solid var(--line); font-size: 13px; font-weight: 700; line-height: 1.4; }
.og-say::before { content: ''; position: absolute; top: -7px; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top: 0; border-bottom-color: var(--line); }
.og-txt h3 { margin-top: 0; }
.og-stable { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.og-mini { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.og-mini .og-pic { width: 56px; height: 56px; flex: none; }
.og-mini b { display: block; font-size: 14.5px; color: var(--brand); }
.og-mini small { display: block; font-size: 12.5px; color: var(--muted); }
.og-mini em { display: block; font-style: normal; font-size: 13px; font-weight: 700; }
@media (max-width: 520px) { .organ.og { grid-template-columns: 1fr; } .og-txt { text-align: left; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .og-nick, :root:not([data-theme="light"]) .og-mini b { color: var(--accent); } }
:root[data-theme="dark"] .og-nick, :root[data-theme="dark"] .og-mini b { color: var(--accent); }

/* ───── 행운 패션 코디 (js/fashion.js) ───── */
.fz-g { margin-bottom: 12px; }
.fz-yy { display: flex; height: 30px; border-radius: 999px; overflow: hidden; font-size: 13.5px; font-weight: 800; margin: 4px 0 10px; border: 1px solid var(--line); }
.fz-yy span { display: grid; place-items: center; min-width: 52px; }
.fz-yy .y { background: #f6d8a8; color: #6b3d00; } .fz-yy .i { background: #33415e; color: #fff; }
.fz-stage.now { border: 2px solid var(--brand); }
.fz-stage .sec-title small { font-size: 14px; font-weight: 600; }
.fz-now { margin-left: auto; font-size: 12.5px; font-weight: 800; color: #fff; background: var(--brand); border-radius: 999px; padding: 3px 10px; }
.fz-src { font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.fz-src span { color: var(--muted); }
.fz-pal { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 10px 0; }
.fz-pal > div { border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; background: var(--surface-2); }
.fz-pal b { display: block; font-size: 13.5px; margin-bottom: 6px; }
.fz-pal > div > div { display: flex; flex-wrap: wrap; gap: 4px; }
.fz-sw { display: inline-grid; place-items: center; min-height: 34px; padding: 2px 10px; border-radius: 9px; font-size: 13px; font-weight: 800; box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .18); }
.fz-info p { margin: 6px 0; }
.fz-looks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.fz-look { margin: 0; border: 1px solid var(--line); border-radius: 14px; padding: 10px; background: var(--surface-2); display: grid; align-content: start; gap: 6px; }
.fz-look figcaption { font-weight: 800; text-align: center; }
.fz-fig { display: grid; place-items: center; background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); border-radius: 10px; }
.fz-fig svg { width: 100%; max-width: 150px; height: auto; }
.fz-look ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; font-size: 13.5px; line-height: 1.5; }
.fz-look li b { margin-right: 2px; }
.fz-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -1px; margin-right: 4px; box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .25); }
@media (max-width: 640px) { .fz-looks { grid-template-columns: 1fr; } .fz-look { grid-template-columns: 110px 1fr; align-items: center; } .fz-look figcaption { grid-column: 1 / -1; text-align: left; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fz-fig { background: rgba(255, 255, 255, .08); } }
:root[data-theme="dark"] .fz-fig { background: rgba(255, 255, 255, .08); }
.fz-now { white-space: nowrap; }
@media (max-width: 640px) { .fz-pal { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fz-stage .sec-title { flex-wrap: wrap; } .fz-stage .sec-title small { flex-basis: 100%; order: 3; } }

/* ───── 운명의 짝 매칭 ───── */
.ds-box { margin: 8px 0 0; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--surface-2); }
.ds-box summary { cursor: pointer; font-weight: 800; min-height: 40px; display: flex; align-items: center; }
.ds-grp { border: 0; padding: 0; margin: 12px 0 0; }
.ds-grp legend { font-weight: 800; font-size: 14.5px; margin-bottom: 6px; }
.ds-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 10px; }
.ds-vals { grid-template-columns: 1fr; }
.ds-f { display: grid; gap: 3px; font-size: 13.5px; }
.ds-vals .ds-f { grid-template-columns: 1fr 150px; align-items: center; }
.ds-f select, .ds-f input { min-height: 40px; padding: 6px 10px; border: 1.5px solid var(--field-border); border-radius: 10px; background: var(--field-bg); color: var(--ink); font-size: 15px; }
.ds-hobs { display: flex; flex-wrap: wrap; gap: 6px; }
.chk-chip { position: relative; }
.chk-chip input { position: absolute; opacity: 0; inset: 0; }
.chk-chip span { display: inline-block; padding: 7px 12px; border: 1.5px solid var(--field-border); border-radius: 999px; font-size: 14px; cursor: pointer; }
.chk-chip input:checked + span { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700; }
.chk-chip input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.ds-res { text-align: left; }
.ds-score { --p: 60; width: 150px; height: 150px; margin: 6px auto 4px; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: radial-gradient(closest-side, var(--surface) 78%, transparent 79% 100%), conic-gradient(#d6456b calc(var(--p) * 1%), var(--line) 0); }
.ds-score b { font-size: 46px; line-height: 1; } .ds-score small { font-size: 14px; color: var(--muted); }
.ds-tier { text-align: center; font-size: 19px; font-weight: 800; color: var(--seal); margin: 4px 0; }
.ds-rule { text-align: center; }
.ds-notes { border: 1.5px dashed var(--seal); border-radius: 12px; padding: 8px 12px; margin: 10px 0; }
.ds-notes ul { margin: 4px 0 0; padding-left: 20px; }
.ds-res h3 { font-size: 16.5px; margin: 16px 0 4px; }
.ds-res ul { margin: 0; padding-left: 20px; } .ds-res li { margin: 3px 0; }
.ds-ai { margin-top: 16px; border-top: 1px dashed var(--line); padding-top: 12px; }
.ds-ai-body h4 { margin: 12px 0 4px; font-size: 15.5px; }
@media (max-width: 520px) { .ds-vals .ds-f { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .ds-grid:not(.ds-vals) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ds-f select, .ds-f input { font-size: 14.5px; padding: 6px 8px; } }

/* ───── 꿈해몽 ───── */
.dm-search { background: linear-gradient(135deg, rgba(38, 40, 92, .9), rgba(76, 53, 140, .88)), var(--surface); color: #fff; border: 0; }
.dm-search .muted, .dm-search a { color: #e7defc; }
.dm-q-lab { display: block; font-size: 19px; font-weight: 800; margin-bottom: 10px; }
.dm-q-row { display: flex; gap: 8px; }
.dm-q-row input { flex: 1; min-width: 0; min-height: 48px; font-size: 17px; padding: 8px 14px; border-radius: 12px; border: 2px solid #b9a6f5; background: #fffdf8; color: #1d1a15; }
.dm-q-row .btn { white-space: nowrap; }
.dm-tabs { display: flex; gap: 6px; overflow-x: auto; margin: 0 0 12px; padding-bottom: 4px; scrollbar-width: thin; }
.dm-tabs a { flex: none; padding: 7px 12px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); font-size: 14px; font-weight: 700; text-decoration: none; color: var(--ink); }
.dm-tabs a.on { background: var(--brand); border-color: var(--brand); color: #fff; }
/* 고전으로 읽는 내 사주 — 원국 · 대운 · 세운 · 월운 탭(버튼) */
.dm-tabs button { flex: none; padding: 7px 12px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); font: inherit; font-size: 14px; font-weight: 700; color: var(--ink); cursor: pointer; }
.dm-tabs button.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.cm-tabs { margin-top: 4px; }
.dm-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.dm-tag { padding: 8px 14px; border-radius: 999px; background: var(--accent-soft); color: var(--brand); font-weight: 800; text-decoration: none; }
.dm-tag.sub { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); font-weight: 600; }
.dm-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.dm-cat { display: grid; justify-items: center; gap: 2px; padding: 12px 6px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface-2); text-decoration: none; color: var(--ink); }
.dm-cat span { font-size: 28px; } .dm-cat small { color: var(--muted); }
.dm-ai-cta { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); border: 2px solid var(--brand); }
.dm-ai-cta > span:first-child { font-size: 30px; } .dm-ai-cta > span:last-child { margin-left: auto; font-size: 26px; color: var(--brand); }
.dm-ai-cta b { display: block; font-size: 17px; } .dm-ai-cta small { color: var(--muted); }
.dm-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.dm-card { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); text-decoration: none; color: var(--ink); }
.dm-card:hover { border-color: var(--brand); }
.dm-ico { font-size: 24px; line-height: 1; }
.dm-cbody { display: grid; gap: 2px; }
.dm-ch { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .dm-ch b { font-size: 16.5px; }
.dm-csum { font-size: 14px; color: var(--muted); }
.dv { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.dv.big { font-size: 15px; padding: 3px 12px; vertical-align: middle; }
.dv-good { background: #fde2e2; color: #9b1c1c; } .dv-bad { background: #dbe7fb; color: #1d3f7a; } .dv-neutral { background: #ece8df; color: #4a4336; }
.dm-title { font-size: 24px; margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dm-vsub { color: var(--muted); margin: 2px 0 10px; font-size: 14px; }
.dm-detail h3, .dm-reading h3 { font-size: 16.5px; margin: 18px 0 6px; }
.dm-sits { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.dm-sits li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.dm-sits p { margin: 2px 0 0; }
.dm-adv { margin-top: 14px; padding: 10px 14px; border-radius: 12px; background: var(--accent-soft); }
.dm-adv p { margin: 4px 0; }
.dm-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.dm-note { margin: 4px 4px 0; }
.dm-ai-v { font-weight: 800; }
#dmStory { width: 100%; min-height: 140px; padding: 10px 12px; border: 1.5px solid var(--field-border); border-radius: 12px; background: var(--field-bg); color: var(--ink); font: inherit; resize: vertical; }
#dmCtx { width: 100%; min-height: 44px; padding: 8px 12px; border: 1.5px solid var(--field-border); border-radius: 12px; background: var(--field-bg); color: var(--ink); font: inherit; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dv-good { background: #4a1f24; color: #ffc9c9; } :root:not([data-theme="light"]) .dv-bad { background: #1d2e4d; color: #c7dafc; } :root:not([data-theme="light"]) .dv-neutral { background: #3a352c; color: #e9e1d0; } }
:root[data-theme="dark"] .dv-good { background: #4a1f24; color: #ffc9c9; } :root[data-theme="dark"] .dv-bad { background: #1d2e4d; color: #c7dafc; } :root[data-theme="dark"] .dv-neutral { background: #3a352c; color: #e9e1d0; }

/* 세계의 꿈해몽 */
.dm-world { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.dm-world li { padding: 10px 12px; border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 10px; background: var(--surface-2); }
.dm-world p { margin: 4px 0 0; }
.dm-wc { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; text-decoration: none; color: var(--ink); }
.dm-cultures { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.dm-culture { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); text-decoration: none; color: var(--ink); }
.dm-culture:hover { border-color: var(--brand); }
.dm-cu-ico { font-size: 30px; line-height: 1; }
.dm-culture b { display: block; font-size: 16.5px; } .dm-culture small { display: block; color: var(--brand); font-weight: 700; margin: 2px 0 4px; } .dm-culture em { font-style: normal; font-size: 14px; color: var(--muted); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dm-culture small { color: var(--accent); } }
:root[data-theme="dark"] .dm-culture small { color: var(--accent); }
.dm-search { grid-template-columns: minmax(0, 1fr); } .dm-search > * { min-width: 0; } .dm-q-row input { width: 100%; }

/* ───── 관상 보기 ───── */
.fc-grp { border: 0; padding: 0; margin: 14px 0 0; }
.fc-grp legend { font-weight: 800; margin-bottom: 6px; }
.fc-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.fc-opts .chk-chip span { font-size: 14px; }
.fc-res h3 { font-size: 17px; margin: 18px 0 6px; color: var(--seal); }
.fc-res h4 { font-size: 15.5px; margin: 12px 0 2px; }
.fc-res p { margin: 4px 0; }
.fc-str li { font-weight: 800; margin: 4px 0; }
.fc-ask { padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); font-weight: 700; }
.fc-drop { display: flex; align-items: center; gap: 14px; padding: 14px; border: 2px dashed var(--field-border); border-radius: 14px; background: var(--surface-2); cursor: pointer; }
.fc-drop b { display: block; font-size: 16px; } .fc-drop small { color: var(--muted); }
.fc-prev { width: 96px; height: 96px; flex: none; border-radius: 12px; background: var(--surface); display: grid; place-items: center; font-size: 44px; overflow: hidden; border: 1px solid var(--line); }
.fc-prev img { width: 100%; height: 100%; object-fit: cover; }
#fcPhotoOut:not([hidden]) { margin-top: 12px; }
.fc-file { position: absolute; width: 1px; height: 1px; opacity: 0; }
.fc-drop:has(+ .fc-file:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
#fcNote { width: 100%; min-height: 44px; padding: 8px 12px; border: 1.5px solid var(--field-border); border-radius: 12px; background: var(--field-bg); color: var(--ink); font: inherit; }

/* ───── 주역 점 ───── */
#icQ, #lyQ { width: 100%; min-height: 84px; padding: 10px 12px; border: 1.5px solid var(--field-border); border-radius: 12px; background: var(--field-bg); color: var(--ink); font: inherit; resize: vertical; }
.ic-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ic-nums p { grid-column: 1 / -1; }
.ic-nums input { min-height: 46px; font-size: 18px; text-align: center; border: 1.5px solid var(--field-border); border-radius: 12px; background: var(--field-bg); color: var(--ink); }
.ic-res h3 { font-size: 17px; margin: 18px 0 6px; color: var(--seal); }
.ic-h { margin: 0; font-size: 22px; }
.ic-q { font-weight: 700; color: var(--muted); margin: 4px 0 10px; }
.ic-hexes { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 6px 0; }
.ic-hexes figure { margin: 0; display: grid; justify-items: center; gap: 2px; text-align: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); min-width: 140px; }
.ic-hexes figcaption { font-size: 13px; font-weight: 800; color: var(--muted); }
.ic-svg { width: 120px; height: auto; color: var(--ink); }
.ic-glyph { font-size: 30px; line-height: 1; font-weight: 400; }
.ic-arrow { font-size: 26px; color: var(--seal); }
.ic-guide { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ic-guide li { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.ic-how summary { cursor: pointer; font-weight: 700; color: var(--brand); min-height: 40px; display: flex; align-items: center; }
.ic-casting { text-align: center; }
.ic-build { display: grid; gap: 8px; width: 160px; margin: 8px auto; }
.ic-build i { display: block; height: 14px; border-radius: 3px; animation: ic-in .25s ease-out; }
.ic-build i.y { background: var(--ink); }
.ic-build i.n { display: flex; justify-content: space-between; } .ic-build i.n span { width: 44%; background: var(--ink); border-radius: 3px; }
@keyframes ic-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* 시초점(18변법) 안내 · 과정 표 */
.ic-guide-box > summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; color: var(--brand); }
.ic-guide-box h3 { font-size: 17px; margin: 16px 0 6px; color: var(--seal); }
.ic-guide-box ul, .ic-guide-box ol { margin: 0 0 8px; padding-left: 22px; } .ic-guide-box li { margin: 4px 0; }
.ic-yt td, .ic-yt th { font-size: 14.5px; } .ic-yt tbody th { white-space: nowrap; }
.ic-cnt { margin: 0 0 8px; font-size: 15px; color: var(--muted); } .ic-cnt b { font-size: 22px; color: var(--seal); }
@media (max-width: 520px) { .ic-hexes { flex-wrap: nowrap; gap: 6px; } .ic-hexes figure { min-width: 0; flex: 1; padding: 8px 6px; } .ic-svg { width: 92px; } .ic-hexes b { font-size: 14px; } .ic-glyph { font-size: 24px !important; } .ic-arrow { font-size: 20px; } }

/* 태어난 시간 「모름」 → 시간 찾기 안내 */
.sj-find { margin-top: 8px; padding: 10px 12px; border: 1.5px dashed var(--brand); border-radius: 12px; background: var(--accent-soft); }
.sj-find p { margin: 0 0 8px; font-size: 14px; }
.sj-back { margin: 6px 0 0; font-size: 13.5px; font-weight: 700; color: var(--brand); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sj-back { color: var(--accent); } }
:root[data-theme="dark"] .sj-back { color: var(--accent); }
/* 다국어: 긴 번역에도 머리글 버튼이 한 줄로 */
.join-link { white-space: nowrap; }
/* 머리글의 「🛒 상점」 — 좁은 화면에서는 아이콘만(회원가입 · 화면 모드 버튼과 한 줄에 들어가게) */
@media (max-width: 620px) { #shopLink .shop-label { display: none; } #shopLink { min-width: 40px; justify-content: center; padding-inline: 10px; } .has-shop .top-inner { flex-wrap: wrap; row-gap: 2px; } .has-shop .top-actions { margin-left: auto; } }
@media (max-width: 420px) { .top-actions { gap: 6px; } .i18n-btn { padding: 4px 8px; } .join-link { font-size: 13px; padding-inline: 10px; } }
/* 다국어 RTL(아랍어·페르시아어·히브리어): 건너뛰기 링크는 오른쪽 밖으로 */
[dir="rtl"] .skip { left: auto; right: -999px; } [dir="rtl"] .skip:focus { right: 8px; }

/* ───── 인생 전략 리포트 · 상담 전 질문 · 피드백 · 메일 질문 (2026-09-28) ───── */
.sdash { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 4px 0 14px; }
@media (max-width: 720px) { .sdash { grid-template-columns: minmax(0, 1fr); } }
.sd-box { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--surface-2); text-align: center; min-width: 0; }
.sd-h { font-weight: 700; margin: 0 0 8px; }
.sd-donut, .sd-comp { width: 130px; height: 130px; display: block; margin: 0 auto; }
.sd-dn-k { font-size: 12px; fill: var(--muted); } .sd-dn-v { font-size: 18px; font-weight: 700; fill: var(--ink); }
.sd-leg { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: center; font-size: 13px; }
.sd-leg i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; }
.sd-chip { margin: 6px 0; padding: 8px 10px; border-radius: 10px; font-size: 14px; text-align: left; overflow-wrap: anywhere; }
.sd-chip.p { background: var(--el4-bg); } .sd-chip.s { background: var(--el3-bg); } .sd-chip.d { background: var(--accent-soft); }
.sd-c-ring { fill: var(--surface); stroke: var(--line); stroke-width: 2; } .sd-c-in { fill: none; stroke: var(--line); stroke-dasharray: 3 3; }
.sd-c-t { font-size: 11px; fill: var(--muted); font-weight: 600; } .sd-c-t.on { fill: var(--seal); font-size: 13px; font-weight: 800; }
.sd-c-nd { fill: var(--seal); } .sd-c-dot { fill: var(--ink); }
.sd-ph { margin: 6px 0 0; font-weight: 700; } .sd-ph.up { color: var(--seal); } .sd-ph.down { color: var(--el4); }
.st-lead { font-size: 16px; }
.st-h { font-size: 16px; margin: 18px 0 6px; }
.sz-list, .cg-list, .pv-list { padding-left: 18px; }
.sz-list li, .pv-list li { margin: 6px 0; }
.sz-o { font-weight: 700; color: var(--seal); margin-right: 4px; }
.cg-list li { margin: 8px 0; } .cg-list p { margin: 2px 0 0; }
.st-ol li { margin: 4px 0; }
.st-micro { border-left: 4px solid var(--accent); background: var(--accent-soft); border-radius: 8px; padding: 8px 12px; margin: 10px 0; }
.st-micro p { margin: 4px 0; }
.jung { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 620px) { .jung { grid-template-columns: minmax(0, 1fr); } }
.jung > div { border-radius: 12px; padding: 10px 12px; border: 1px solid var(--line); }
.jg-p { background: var(--el4-bg); } .jg-s { background: var(--el3-bg); }
.jung p { margin: 6px 0 0; } .jg-w { font-weight: 600; }
.tr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 620px) { .tr-grid { grid-template-columns: minmax(0, 1fr); } }
.tr-h { font-weight: 700; margin: 6px 0; }
ul.chk { list-style: none; padding: 0; margin: 0; } ul.chk li { margin: 4px 0; } ul.chk label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; } ul.chk input { margin-top: 4px; flex: none; width: 18px; height: 18px; }
.pv-c { display: inline-block; font-size: 12px; border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; margin-right: 4px; color: var(--muted); }
.st-today .st-micro-1 { border-left: 4px solid var(--accent); padding-left: 10px; }
.intake, .st-mini { border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 10px 0; background: var(--surface-2); }
.intake > summary, .st-mini > summary, .askmail > summary { cursor: pointer; font-weight: 700; min-height: 32px; }
.ik-row { margin: 10px 0 0; }
.ik-q { display: block; font-weight: 600; margin: 0 0 6px; }
.ik-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ik-chip { border: 1.5px solid var(--line); background: var(--surface); border-radius: 999px; padding: 6px 12px; min-height: 40px; cursor: pointer; color: var(--ink); font: inherit; font-size: 14px; }
.ik-chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 700; }
.ik-row input[type=text], .ik-row input[type=email], .ik-row select, .ik-row textarea, .fb textarea, .fb-nick { width: 100%; box-sizing: border-box; border: 1.5px solid var(--field-border, var(--line)); background: var(--field-bg, var(--surface)); color: var(--ink); border-radius: 10px; padding: 10px 12px; font: inherit; min-width: 0; }
.st-mini-body { margin-top: 8px; }
.five-lens { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border: 1px dashed var(--line); }
.five-lens p { margin: 6px 0; } .fl-h { font-weight: 700; }
.tjung { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--el3-bg); }
.tjung h3 { margin: 0 0 6px; font-size: 16px; }
.fb h3, .rv h3 { margin: 0 0 6px; }
.fb-stars { display: flex; align-items: center; gap: 2px; margin: 6px 0 8px; flex-wrap: wrap; }
.fb-stars button { font-size: 30px; line-height: 1; background: none; border: 0; color: var(--star-off, #c9bfa9); cursor: pointer; min-width: 44px; min-height: 44px; }
.fb-stars button.on { color: var(--star-on, #d9a300); }
.fb-sv { margin-left: 6px; }
.fb-row { display: flex; gap: 8px; align-items: center; margin: 8px 0; } .fb-nick { flex: 1 1 auto; } .fb-cnt { flex: none; }
.fb-msg:empty, .am-msg:empty { display: none; }
.rv-item { margin: 8px 0; padding: 10px 12px; border-left: 4px solid var(--accent); background: var(--surface-2); border-radius: 8px; }
.rv-item p { margin: 2px 0; } .rv-st { color: var(--star-on, #b37a00); letter-spacing: 1px; } .rv-avg { margin: 0 0 6px; }
.am-privacy { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin: 10px 0; background: var(--surface-2); }
.am-privacy ul { margin: 4px 0 0; padding-left: 18px; }

/* ───── 신년운수 (#/newyear) ───── */
.ny-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.ny-top select { min-height: 44px; border: 1.5px solid var(--field-border, var(--line)); background: var(--field-bg, var(--surface)); color: var(--ink); border-radius: 10px; padding: 6px 10px; font: inherit; }
.ny-title { font-size: 26px; margin: 4px 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ny-title span { font-size: 18px; color: var(--muted); }
.ny-theme { font-weight: 700; margin: 4px 0 10px; }
.ny-months { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.ny-m { padding: 7px 10px; border-radius: 8px; background: var(--surface-2); border-left: 4px solid var(--h3); font-size: 14.5px; }
.ny-m.hi { border-left-color: var(--h5); } .ny-m.lo { border-left-color: var(--h1); }
.ny-lines i, .ny-wish .ny-lines i { display: block; border-bottom: 1px solid var(--line); height: 34px; }
@media print {
  body.print-ny .top, body.print-ny #menu, body.print-ny #pageHead, body.print-ny .foot, body.print-ny .skip, body.print-ny .i18n-help,
  body.print-ny .fb, body.print-ny .ny-top, body.print-ny .btn_area, body.print-ny .amu-pdf, body.print-ny #confirmBox, body.print-ny .bg-hanja { display: none !important; }
  body.print-ny { color: #1d1a15; font-size: 10.5pt; }
  body.print-ny .card { background: rgba(255, 252, 244, .72) !important; box-shadow: none !important; border: 1px solid #c8b58a !important; break-inside: auto; margin-bottom: 5mm; }
  body.print-ny .tj-field, body.print-ny .ny-m, body.print-ny .sz-list li, body.print-ny tr { break-inside: avoid; }
  body.print-ny .ny-hero::before { content: '운명 치유 연구소 · 신년운수'; display: block; font-family: 'Nanum Brush Script', cursive; font-size: 18pt; color: #6a4bd6; margin-bottom: 2mm; }
  body.print-ny .scroll-x { overflow: visible !important; }
  body.print-ny .ny-lines i { height: 12mm; border-bottom-color: #c8b58a; }
}

/* ───── 맞춤 개운 부적 (js/talisman.js) ───── */
a.tl-entry { display: grid; grid-template-columns: 54px 1fr auto; gap: 14px; align-items: center; text-decoration: none; color: var(--ink); border: 2px solid #c89b20; }
.tl-entry-img svg { width: 54px; height: auto; display: block; }
.tl-entry-txt { display: grid; gap: 2px; } .tl-entry-txt b { font-size: 18px; } .tl-entry-txt span { font-size: 14.5px; color: var(--muted); }
.tl-entry-go { font-size: 30px; font-weight: 700; color: var(--accent); }
.tl-res h3, .tl-amu h3 { font-size: 17px; margin: 18px 0 8px; color: var(--seal); }
.tl-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tl-flow li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.tl-flow li > b { flex: 0 0 auto; min-width: 5.6em; }
.tl-flow .sbar { margin-left: auto; }
.tl-row { display: grid; grid-template-columns: minmax(150px, 210px) 1fr; gap: 18px; align-items: start; }
.tl-img svg { width: 100%; height: auto; display: block; border-radius: 6px; box-shadow: 0 6px 18px rgba(60, 40, 10, .28); }
.tl-txt h3 { margin-top: 10px; } .tl-txt p { margin: 0 0 8px; }
.tl-els { display: flex; flex-wrap: wrap; gap: 6px; }
.tl-prompt { margin: 0; padding: 12px 14px; border: 1.5px solid var(--field-border); border-radius: 12px; background: var(--surface-2); color: var(--ink); font: 500 14.5px/1.65 ui-monospace, 'Cascadia Mono', Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; }
.tl-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0 0; }
.ds-ai-body .tl-prompt { margin: 8px 0 0; }
@media (max-width: 560px) { .tl-row { grid-template-columns: 1fr; } .tl-img { width: min(62%, 220px); margin: 0 auto; } a.tl-entry { grid-template-columns: 44px 1fr auto; gap: 10px; } .tl-entry-img svg { width: 44px; } .tl-entry-txt b { font-size: 16.5px; } .tl-flow .sbar { margin-left: 0; } }
/* 운세 화면 부적 카드의 맨 앞: 맞춤 부적 */
.amu-mine { padding: 12px; border: 2px solid #c89b20; border-radius: 16px; background: var(--surface-2); }
.amu-mine a.amu-img { display: block; } .amu-mine .amu-img svg { border-radius: 5px; box-shadow: 0 4px 12px rgba(60, 40, 10, .25); }
.amu-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; } .amu-acts .btn { margin-top: 4px; text-decoration: none; display: inline-flex; align-items: center; }
.amu a.btn.primary { color: #fff; }

/* 주역 점: 동전점 — 늘어놓은 동전 여섯 닢(위 효부터) */
.ic-methods { flex-wrap: wrap; }
.ic-coins { list-style: none; margin: 8px 0 4px; padding: 0; display: grid; gap: 6px; max-width: 420px; }
.ic-coins li { display: grid; grid-template-columns: 3.2em 34px auto 1fr; align-items: center; gap: 10px; font-size: 14.5px; }
.ic-coins i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 2px solid #8a6a2a; background: #e8c97a; color: #4a3608; font: 700 15px/1 'Noto Serif KR', serif; font-style: normal; }
.ic-coins li.n i { background: #cdb98f; color: #6b5a36; }
.ic-coins li.mk i { border-color: #c62828; box-shadow: 0 0 0 3px rgba(198, 40, 40, .25); }
.ic-coins em { font-style: normal; font-weight: 700; color: #c62828; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ic-coins em { color: #ff8a80; } }
:root[data-theme="dark"] .ic-coins em { color: #ff8a80; }

/* 주역 점: 체용 · 오행 생극 */
.ic-ty th { white-space: nowrap; }
.ic-grade { display: inline-block; padding: 1px 10px; border-radius: 999px; font-weight: 800; font-size: 14px; background: var(--surface-2); border: 1.5px solid var(--line); }
.ic-grade.g5 { background: #fde0dc; border-color: #cc2f2f; color: #7a1414; } .ic-grade.g4 { background: #fde9dd; border-color: #e0855a; color: #6a2a0c; }
.ic-grade.g3 { background: #fbf0c8; border-color: #c9a227; color: #4d3b05; } .ic-grade.g2 { background: #e3ecfb; border-color: #7f9fdb; color: #1b3568; } .ic-grade.g1 { background: #dbe6fb; border-color: #3f6fd0; color: #12295c; }

/* 손금 보기(관상 보기 안의 탭) */
.fc-kind { margin-bottom: 6px; } .fc-kind a { font-size: 16.5px; }
.pl-fig { margin: 8px 0 4px; display: grid; grid-template-columns: minmax(150px, 210px) 1fr; gap: 14px; align-items: center; }
.pl-svg { width: 100%; height: auto; display: block; }
.pl-fig figcaption { display: grid; gap: 6px; font-size: 15px; }
.pl-fig figcaption span { display: flex; align-items: center; gap: 8px; }
.pl-fig figcaption i { width: 22px; height: 5px; border-radius: 3px; flex: none; }
.pl-tips { margin: 6px 0 12px; padding-left: 20px; font-size: 15px; } .pl-tips li { margin: 2px 0; }
@media (max-width: 480px) { .pl-fig { grid-template-columns: 1fr; } .pl-svg { max-width: 210px; margin: 0 auto; } .pl-fig figcaption { grid-template-columns: 1fr 1fr; } }

/* 전통 부적 54종(맞춤 부적 화면) — 소원별 구성 단추 · 세로 부적 그림 */
.bj-sets button { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; border-radius: 10px; }
.bj-sets button[aria-pressed="true"] span { background: var(--brand); color: #fff; font-weight: 700; }
.bj-sets button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.bj-desc { margin: 0 0 12px; }
.bj-item .amu-img { width: 120px; height: 196px; }
.bj-item .amu-img img { width: 100%; height: 100%; display: block; border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.bj-item .bj-guard { margin: 0; text-align: center; font-size: 13px; font-weight: 700; color: var(--seal); }

/* 달력 일진(60갑자) — 날짜 아래 작은 글자, 천간 오행 색 */
.cell .gz, .wcol .gz { font-size: 10.5px; font-weight: 700; line-height: 1.15; letter-spacing: .02em; white-space: nowrap; }
.wcol .gz { font-size: 12px; }
/* 달력 칸은 점수 색 바탕이라 칸 글자색 그대로(대비 유지), 주간 막대는 종이 바탕이라 천간 오행 색 */
.cell .gz { color: inherit; opacity: .95; }
.wcol .gz.el0 { color: #17694a; } .wcol .gz.el1 { color: #b0281c; } .wcol .gz.el2 { color: #8a5a0c; } .wcol .gz.el3 { color: #4f5864; } .wcol .gz.el4 { color: #1f3f86; }
:root[data-theme="dark"] .wcol .gz.el0 { color: #6fd3a5; } :root[data-theme="dark"] .wcol .gz.el1 { color: #ff8f80; } :root[data-theme="dark"] .wcol .gz.el2 { color: #f0c35a; } :root[data-theme="dark"] .wcol .gz.el3 { color: #c9d0da; } :root[data-theme="dark"] .wcol .gz.el4 { color: #8fb4ff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wcol .gz.el0 { color: #6fd3a5; } :root:not([data-theme="light"]) .wcol .gz.el1 { color: #ff8f80; } :root:not([data-theme="light"]) .wcol .gz.el2 { color: #f0c35a; } :root:not([data-theme="light"]) .wcol .gz.el3 { color: #c9d0da; } :root:not([data-theme="light"]) .wcol .gz.el4 { color: #8fb4ff; } }
@media (max-width: 620px) { .cell .gz { font-size: 9.5px; letter-spacing: 0; } .cell { min-height: 72px; } }
.gzd { font-weight: 700; letter-spacing: .03em; }

/* 상단 메뉴 배경 배너(2026-10-04, 사용자가 준 봉황 · 健康長壽 그림 img/menu-banner.webp, 2000×667)
   그림이 화려해 아이콘 · 글자가 묻혔다(사용자 제보) → 메뉴 항목마다 한지색 타일(금테) 위에 아이콘 + 진한 글자, 화살표는 붉은 원 + 흰 꺾쇠 */
.menu_area { background: #f3e2b4 url("../img/menu-banner.webp") center / cover no-repeat; border: 1.5px solid #c89b20; box-shadow: 0 6px 18px rgba(90, 40, 10, .22); position: relative; }
.menu_area::before { content: ""; position: absolute; inset: 0; background: rgba(255, 246, 222, .34); pointer-events: none; }
.menu_area > * { position: relative; }
.menu_tit { width: fit-content; padding: 4px 16px 4px 6px; border-radius: 999px; background: #fff8e6; color: #3a1405; border: 1.5px solid #c89b20; box-shadow: 0 2px 6px rgba(90, 40, 10, .25); font-weight: 800; }
.menu_li a { gap: 5px; padding: 7px 4px 8px; border: 1.5px solid #d6ad4a; border-radius: 16px; background: rgba(255, 250, 236, .94); box-shadow: 0 2px 8px rgba(90, 30, 10, .28); color: #2a1206; font-weight: 800; transition: transform .15s, box-shadow .15s; }
.menu_li a span { padding: 0; background: none; color: #2a1206; text-shadow: none; }
.menu_li a img { max-width: 84px; border-radius: 25%; box-shadow: 0 3px 8px rgba(60, 30, 90, .22); outline: none; } /* 아이콘 = tools/make-menu-icons.mjs (파스텔 스퀴클 + 3D 클레이) */
.menu_li a:hover { border-color: #b3261e; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(120, 30, 10, .32); }
.menu_li a:hover img { transform: none; }
.menu_li li.on a { background: #fff3d6; border: 2.5px solid #b3261e; box-shadow: 0 0 0 3px rgba(179, 38, 30, .22), 0 2px 8px rgba(90, 30, 10, .28); }
.menu_li li.on a span { color: #9b1c12; }
.menu_li a:focus-visible { outline: 3px solid #b3261e; outline-offset: 2px; }
.menu_num { color: #2a1206; }
.menu_num > span { padding: 2px 12px; border-radius: 999px; background: #fff8e6; border: 1px solid #c89b20; font-weight: 700; }
/* 페이지 넘김 화살표: 붉은 원 + 금테 + 흰 꺾쇠(어떤 배경에서도 또렷하게), 처음 ↔ 끝은 이어짐 */
.menu_nav { width: 46px; height: 46px; border-radius: 50%; background: #a8170f; border: 2.5px solid #f3d36b; box-shadow: 0 3px 10px rgba(60, 10, 0, .45); color: #fff; display: grid; place-items: center; }
.menu_nav svg { width: 24px; height: 24px; display: block; }
.menu_nav:hover { background: #c81d12; }
.menu_nav.dim { opacity: 1; }
@media (max-width: 620px) {
  .menu_nav { width: 36px; height: 36px; border-width: 2px; }
  .menu_nav svg { width: 19px; height: 19px; }
  .menu_li a { padding: 6px 2px 7px; border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) { .menu_li a { transition: none; } .menu_li a:hover { transform: none; } }

/* 신년운수: 월별 상세 · 분야별 상세 · 5년 대운 흐름 */
.ny-mds { display: grid; gap: 8px; margin-top: 12px; }
/* 유료 신년운수의 잠긴 칸 */
.ny-lock { border: 1px dashed var(--line); border-left: 4px solid #a3150c; border-radius: 12px; background: var(--surface-2); padding: 10px 14px; margin-top: 12px; }
.ny-lock p { margin: 4px 0; }
.ny-md { border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); padding: 0 12px; }
.ny-md > summary { cursor: pointer; min-height: 46px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 0; }
.ny-md.hi { border-left: 5px solid var(--h5); } .ny-md.lo { border-left: 5px solid var(--h1); } .ny-md.mid { border-left: 5px solid #d9b43a; }
.ny-md[open] { padding-bottom: 10px; }
.ny-mh { font-weight: 700; }
.ny-mf { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 6px; }
.ny-mf li { display: grid; grid-template-columns: 6.2em auto 1fr; gap: 4px 10px; align-items: center; font-size: 15px; }
.ny-days .ny-day { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; }
.ny-note { background: var(--accent-soft); border-radius: 8px; padding: 6px 10px; margin: 6px 0; }
.ny-5c { margin: 6px 0 10px; } .ny-5c svg { width: 100%; max-width: 620px; height: auto; display: block; margin: 0 auto; }
.ny-5c line.g { stroke: var(--line); stroke-width: 1; } .ny-5c line.g.mid { stroke-dasharray: 5 4; }
.ny-5c text { font-size: 15px; fill: var(--muted); text-anchor: middle; } .ny-5c text.yl { text-anchor: end; } .ny-5c text.xl { font-weight: 800; fill: var(--ink); }
.ny-5c polyline { fill: none; stroke-width: 3; stroke-linejoin: round; } .ny-5c polyline.se { stroke: var(--accent); } .ny-5c polyline.du { stroke: var(--seal); stroke-dasharray: 8 5; }
.ny-5c circle.se { fill: var(--accent); } .ny-5c circle.du { fill: var(--seal); }
.ny-5c figcaption { display: flex; gap: 16px; justify-content: center; font-size: 14px; color: var(--muted); }
.ny-5c .lg::before { content: ""; display: inline-block; width: 20px; height: 3px; margin-right: 6px; vertical-align: middle; border-radius: 2px; }
.ny-5c .lg.se::before { background: var(--accent); } .ny-5c .lg.du::before { background: var(--seal); }
.ny-5ys { display: grid; gap: 10px; margin-top: 12px; }
.ny-5y { border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; background: var(--surface-2); }
.ny-5y.now { border: 2px solid var(--accent); }
.ny-5y p { margin: 6px 0; } .ny-5h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 16.5px; }
@media (max-width: 520px) { .ny-mf li { grid-template-columns: 1fr auto; } .ny-mf li > span:last-child { grid-column: 1 / -1; } }
.ny-5t td, .ny-5t th { white-space: nowrap; } .ny-5t td small { color: var(--muted); }
.ny-5t .sbar { width: 96px; }

/* ───── 메뉴 설명 말풍선 (app.js buildMenu 의 #menuTipBox, 마우스를 올리면) ───── */
.menu_tipbox { position: fixed; z-index: 60; max-width: min(290px, calc(100vw - 16px)); padding: 9px 13px; border-radius: 12px; background: #2a1206; color: #fff6e0; font-size: 13.5px; line-height: 1.55; font-weight: 500; box-shadow: 0 8px 22px rgba(40, 15, 5, .35); border: 1px solid #d6ad4a; pointer-events: none; word-break: keep-all; overflow-wrap: break-word; animation: mtip .16s ease-out; }
.menu_tipbox[hidden] { display: none; }
.menu_tipbox::before { content: ""; position: absolute; left: var(--ax, 50%); top: -7px; width: 12px; height: 12px; margin-left: -6px; background: #2a1206; border-left: 1px solid #d6ad4a; border-top: 1px solid #d6ad4a; transform: rotate(45deg); }
.menu_tipbox.up::before { top: auto; bottom: -7px; transform: rotate(225deg); }
@keyframes mtip { from { opacity: 0; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .menu_tipbox { animation: none; } }

/* ───── 풍수 인테리어 (app.js renderFengshui) ───── */
.fs-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.fs-chips label { position: relative; }
.fs-chips input { position: absolute; opacity: 0; inset: 0; }
.fs-chips span { display: inline-block; padding: 7px 14px; border: 1.5px solid var(--field-border, var(--line)); border-radius: 999px; background: var(--surface-2); font-weight: 600; cursor: pointer; }
.fs-chips input:checked + span { background: var(--brand); border-color: var(--brand); color: #fff; }
.fs-chips input:focus-visible + span { outline: 3px solid var(--brand); outline-offset: 2px; }
.fs-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 0 14px; }
.fs-help { margin: 0 0 14px; } .fs-help summary { cursor: pointer; color: var(--muted); font-size: 14px; }
.fs-grid, .fs-map { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 6px 0 14px; }
.fs-cell { display: flex; flex-direction: column; gap: 4px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.fs-cell.c { background: var(--accent-soft); }
.fs-cell select { width: 100%; min-width: 0; font-size: 14px; padding: 6px 4px; }
.fs-cd { font-weight: 700; font-size: 14px; } .fs-cd small { font-weight: 500; color: var(--muted); }
.fs-pb { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; margin: 0 0 8px; background: var(--surface-2); }
.fs-pb summary { cursor: pointer; font-weight: 700; }
.fs-q { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; line-height: 1.5; }
.fs-q input { margin-top: 4px; width: 18px; height: 18px; flex: none; }
.fs-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.fs-need { display: grid; gap: 6px; margin: 8px 0; }
.fs-need-row { display: grid; grid-template-columns: 76px 1fr 44px; gap: 8px; align-items: center; }
.fs-need-k { font-weight: 700; background: none !important; }
.fs-need-bar { position: relative; height: 14px; border-radius: 7px; background: var(--surface-2); border: 1px solid var(--line); }
.fs-need-bar::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; background: var(--muted); opacity: .5; }
.fs-need-bar i { position: absolute; top: 0; bottom: 0; border-radius: 7px; }
.fs-need-bar i.p { background: var(--h5, #d9483b); } .fs-need-bar i.m { background: var(--h1, #3a6fd8); }
.fs-need-v { font-variant-numeric: tabular-nums; text-align: right; font-weight: 700; }
.fs-mc { display: flex; flex-direction: column; gap: 4px; min-height: 96px; padding: 8px; border: 1px solid var(--line); border-top-width: 5px; border-radius: 12px; background: var(--surface-2); font-size: 14px; }
.fs-mc.e0 { border-top-color: #2e8b57; } .fs-mc.e1 { border-top-color: #d32f2f; } .fs-mc.e2 { border-top-color: #d9a93a; } .fs-mc.e3 { border-top-color: #9aa3ad; } .fs-mc.e4 { border-top-color: #31456e; }
.fs-mc b { font-size: 14.5px; }
.fs-tags { display: flex; flex-wrap: wrap; gap: 3px; margin-top: auto; }
.fs-t { font-size: 11.5px; font-weight: 700; padding: 1px 6px; border-radius: 6px; line-height: 1.5; }
.fs-t.g { background: #fbe7a8; color: #5a3d00; } .fs-t.r { background: var(--surface); color: var(--muted); border: 1px dashed var(--line); }
.fs-t.y { background: #ffd9de; color: #7a1020; } .fs-t.a { background: #dfe7f7; color: #1d3264; }
.fs-rooms { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.fs-room { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--surface-2); }
.fs-room h3 { margin: 0 0 6px; font-size: 17px; }
.fs-room ul { margin: 0; padding: 0; list-style: none; }
.fs-it { padding: 8px 0; border-top: 1px dashed var(--line); } .fs-it:first-child { border-top: 0; }
.fs-it p { margin: 0; } .fs-it.keep p:first-child { color: var(--ink); }
.fs-why { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px !important; font-size: 12.5px; }
.fs-cost { font-size: 11.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line); }
.fs-cost.c0 { background: #d8f2e1; color: #11502b; border-color: #9fd8b3; } .fs-cost.c1 { background: #fdf0c8; color: #5a3d00; border-color: #e8cf7d; } .fs-cost.c2 { background: #f7dcd8; color: #6b1a12; border-color: #e0a59c; } .fs-cost.r { background: var(--surface); color: var(--muted); }
.fs-week { list-style: none; margin: 0; padding: 0; }
.fs-week li { padding: 6px 0; } .fs-week label { display: flex; gap: 10px; align-items: flex-start; line-height: 1.55; }
.fs-week input { width: 20px; height: 20px; margin-top: 3px; flex: none; }
.fs-week input:checked + span { text-decoration: line-through; color: var(--muted); }
.fs-more summary { cursor: pointer; font-weight: 700; }
@media (max-width: 480px) { .fs-mc { min-height: 84px; padding: 6px; font-size: 12.5px; } .fs-mc b { font-size: 13px; } .fs-cell { padding: 6px; } .fs-cell select { font-size: 13px; } .fs-need-row { grid-template-columns: 64px 1fr 38px; } }
.fs-fam { display: grid; gap: 6px; margin: 4px 0 8px; }
.fs-fam-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 8px; align-items: center; padding: 4px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.fs-fam-row select { min-width: 0; font-size: 14px; padding: 6px; }
.fs-daily { margin: 6px 0 10px; padding-left: 20px; } .fs-daily li { margin: 4px 0; }
.fs-asks { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
.fs-asks .chip { cursor: pointer; border: 1px solid var(--line); font: inherit; font-size: 13.5px; }
.fs-ai textarea { width: 100%; box-sizing: border-box; }
.fs-aiq { margin: 14px 0 6px; padding: 8px 12px; border-radius: 12px; background: var(--accent-soft); font-weight: 600; }
.fs-icsopt { display: grid; gap: 2px; margin: 6px 0; }
@media (max-width: 480px) { .fs-fam-row { grid-template-columns: 1fr; } }
@media print { body.print-ny .fs-ai, body.print-ny .fs-ics { display: none !important; } }

/* ───── 세계 풍수 백과 (app.js renderFsworld) ───── */
.fw-form input#fwT { width: 100%; box-sizing: border-box; }
.fw-form textarea { width: 100%; box-sizing: border-box; }
.fw-ex, .fw-hist .chip { cursor: pointer; border: 1px solid var(--line); font: inherit; font-size: 13px; margin: 2px 0; }
.fw-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.fw-schools { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 0 14px; }
.fw-s p { margin: 0 0 8px; line-height: 1.75; }
.fw-s.hy { border-top: 4px solid #2e8b57; } .fw-s.ee { border-top: 4px solid #b3261e; } .fw-s.we { border-top: 4px solid #3f6fd8; }
.fw-grade { display: inline-block; font-weight: 800; font-size: 13.5px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line); }
.fw-grade.g5 { background: #fbe7a8; color: #5a3d00; } .fw-grade.g4 { background: #d8f2e1; color: #11502b; } .fw-grade.g3 { background: var(--surface-2); color: var(--ink); } .fw-grade.g2 { background: #dfe7f7; color: #1d3264; } .fw-grade.g0 { background: var(--surface-2); color: var(--muted); }
.fw-remedy { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); }
.fw-remedy b { display: block; margin-bottom: 4px; }
.fw-lit th { min-width: 7em; }
.fw-json summary { cursor: pointer; font-weight: 700; }
.fw-json pre { max-height: 420px; overflow: auto; padding: 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); font-size: 12.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }

/* ───── 건강 · 재물 경고 리포트 (js/guard.js · app.js guardCardHTML) ───── */
.gd-card { border: 2px solid #c62828; }
.gd-lead { font-weight: 600; }
.gd-h { margin: 16px 0 8px; font-size: 16.5px; }
.gd-it { padding: 10px 12px; margin: 0 0 8px; border-radius: 12px; border-left: 6px solid; background: var(--surface-2); }
.gd-it p { margin: 0; line-height: 1.7; }
.gd-it .gd-t { font-weight: 800; margin-bottom: 4px; }
.gd-it.lv-danger { border-left-color: #c62828; background: color-mix(in srgb, #c62828 9%, var(--surface-2)); }
.gd-it.lv-danger .gd-t { color: #b71c1c; }
.gd-it.lv-warn { border-left-color: #e08a00; background: color-mix(in srgb, #e08a00 9%, var(--surface-2)); }
.gd-it.lv-warn .gd-t { color: #8a4b00; }
.gd-it.lv-info { border-left-color: #2e7d32; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gd-it.lv-danger .gd-t { color: #ff8a80; } :root:not([data-theme="light"]) .gd-it.lv-warn .gd-t { color: #ffcc80; } }
:root[data-theme="dark"] .gd-it.lv-danger .gd-t { color: #ff8a80; } :root[data-theme="dark"] .gd-it.lv-warn .gd-t { color: #ffcc80; }
.gd-foot { margin: 12px 0 0; }

/* 주역 공부: 64괘 원문 · 한글음(ruby) · 글자 풀이 */
.ich-search { display: grid; gap: 4px; margin: 14px 0 4px; font-weight: 700; font-size: 14px; }
.ich-search input { min-height: 44px; font-size: 16px; padding: 0 12px; border: 1.5px solid var(--field-border); border-radius: 12px; background: var(--field-bg, var(--surface)); color: var(--ink); }
.ich-part { font-size: 17px; margin: 18px 0 8px; color: var(--seal); } .ich-part span { font-size: 13px; color: var(--muted); font-weight: 600; }
.ich-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.ich-cell { display: grid; justify-items: center; gap: 1px; padding: 8px 4px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); text-decoration: none; text-align: center; }
.ich-cell:hover, .ich-cell:focus-visible { border-color: var(--brand); }
.ich-cell[hidden] { display: none; }
.ich-g { font-size: 30px; line-height: 1.1; font-weight: 400; }
.ich-no { font-size: 12px; color: var(--muted); font-weight: 700; }
.ich-nm { font-size: 14px; font-weight: 700; word-break: keep-all; }
.ich-hz { font-size: 13px; color: var(--muted); }
.ich-head { display: flex; gap: 14px; align-items: center; }
.ich-head figure { margin: 0; flex: none; }
.ich-head .ic-svg { width: 96px; }
.ich-part-tag { margin: 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.ich-title { margin: 2px 0 4px; font-size: 22px; } .ich-big { font-size: 30px; font-weight: 400; }
.ich-note { margin: 8px 0; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); }
.ich-tools { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 12px 0 6px; }
.ich-tools label { display: flex; gap: 6px; align-items: center; min-height: 40px; font-weight: 700; }
.ich-tools input { width: 20px; height: 20px; }
.ich-wrap h3 { font-size: 17px; margin: 18px 0 6px; color: var(--seal); }
.ich-pass { padding: 10px 12px; margin: 0 0 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
.ich-pass.mv { border: 2px solid #c62828; }
.ich-lab { margin: 0; font-size: 14px; color: var(--muted); }
.ich-mv { font-style: normal; font-size: 12.5px; font-weight: 800; color: #fff; background: #b42318; padding: 1px 8px; border-radius: 999px; }
.ich-han { margin: 4px 0 2px; font-size: 26px; line-height: 2.15; letter-spacing: .02em; word-break: break-all; }
.ich-c { cursor: pointer; border-radius: 6px; padding: 0 1px; ruby-position: over; }
.ich-c:hover { background: var(--surface-2); }
.ich-c:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.ich-c rt { font-size: 12px; color: var(--muted); font-weight: 700; letter-spacing: 0; }
.ich-p { color: var(--muted); }
.ich-read { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--seal); }
.ich-kr { margin: 0; line-height: 1.75; }
.ich-wrap.no-yin .ich-c rt { visibility: hidden; } .ich-wrap.no-yin .ich-read { display: none; }
.ich-wrap.no-kr .ich-kr { display: none; }
.ich-gloss { margin: 16px 0 0; } .ich-gloss summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; gap: 6px; color: var(--brand); }
.ich-glist { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.ich-glist li { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; }
.ich-glist b { font-size: 22px; font-weight: 500; line-height: 1; }
.ich-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 18px 0 0; }
.ich-nav .btn { min-width: 0; text-align: center; padding-left: 6px; padding-right: 6px; }
.ich-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; }
.ich-tip { position: fixed; z-index: 60; display: flex; gap: 10px; align-items: center; max-width: min(320px, calc(100vw - 16px)); padding: 8px 14px; border-radius: 12px; background: #2a1206; color: #fff8e8; border: 1.5px solid #d6ad4a; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); font-size: 15px; pointer-events: none; }
.ich-tip b { font-size: 28px; font-weight: 500; line-height: 1; }
.ich-tip[hidden] { display: none; }
@media (max-width: 520px) { .ich-han { font-size: 22px; } .ich-grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); } .ich-g { font-size: 26px; } .ich-head .ic-svg { width: 76px; } .ich-title { font-size: 19px; } }

/* 육효점: 사주삼전 · 동전 세 닢 · 효 쌓기 · 납갑 괘상 · 해석 탭 */
.ly-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.ly-topics label { position: relative; display: grid; gap: 1px; padding: 8px 10px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; }
.ly-topics label:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 2px var(--accent-soft); }
.ly-topics input { position: absolute; opacity: 0; pointer-events: none; }
.ly-topics label:has(input:focus-visible) { outline: 2px solid var(--brand); }
.ly-topics span { font-weight: 700; font-size: 14.5px; } .ly-topics small { font-size: 12px; color: var(--muted); }
.ly-h3 { font-size: 16px; margin: 16px 0 6px; color: var(--seal); }
.ly-when { display: grid; gap: 4px; font-weight: 700; font-size: 14px; }
.ly-when input, .ly-manual select { min-height: 44px; font-size: 16px; padding: 0 10px; border: 1.5px solid var(--field-border); border-radius: 12px; background: var(--field-bg, var(--surface)); color: var(--ink); max-width: 100%; }
.ly-chk { display: flex; gap: 8px; align-items: center; min-height: 40px; margin-top: 6px; font-weight: 700; } .ly-chk input { width: 20px; height: 20px; }
.ly-manual { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 4px 0 8px; }
.ly-manual label { display: grid; gap: 2px; font-size: 13px; font-weight: 700; } .ly-manual select { width: 100%; }
.ly-manual[hidden] { display: none; }
.ly-pil { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ly-pil li { display: grid; justify-items: center; padding: 8px 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); text-align: center; }
.ly-pil span { font-size: 12px; color: var(--muted); font-weight: 700; } .ly-pil b { font-size: 22px; line-height: 1.2; } .ly-pil small { font-size: 12px; color: var(--muted); }
.ly-cnt { margin-left: auto; font-size: 15px; color: var(--muted); }
.ly-coins { display: flex; justify-content: center; gap: 18px; margin: 10px 0 4px; perspective: 600px; }
.ly-coin { position: relative; width: 64px; height: 64px; transform-style: preserve-3d; transition: transform .35s; }
.ly-coin span { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; backface-visibility: hidden; font-weight: 800; border: 3px solid #8a6a2a; box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .25), 0 3px 8px rgba(0, 0, 0, .25); }
.ly-cf { background: radial-gradient(circle at 35% 30%, #fbe7a1, #d4a83a 60%, #9c7420); color: #4a3208; font-size: 15px; letter-spacing: -.02em; }
.ly-cb { background: radial-gradient(circle at 35% 30%, #e9d6a8, #b58f4a 60%, #7d5f28); color: #4a3208; font-size: 24px; transform: rotateY(180deg); }
.ly-coin.t { transform: rotateY(180deg); }
.ly-coin.spin { animation: ly-flip .9s cubic-bezier(.3, .7, .4, 1); }
@keyframes ly-flip { 0% { transform: translateY(0) rotateY(0); } 45% { transform: translateY(-46px) rotateY(900deg); } 100% { transform: translateY(0) rotateY(1800deg); } }
.ly-last { text-align: center; margin: 6px 0 8px; font-size: 15px; }
.ly-stack { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 7px; max-width: 320px; }
.ly-stack li { display: grid; grid-template-columns: 3.2em 1fr 4.6em; align-items: center; gap: 10px; font-size: 14px; }
.ly-stack li:not(.empty) i { animation: ic-in .3s ease-out; }
.ly-stack i { display: block; height: 14px; border-radius: 3px; }
.ly-stack li.empty i { border: 1.5px dashed var(--line); height: 12px; }
.ly-stack i.y { background: var(--ink); } .ly-stack i.n { display: flex; justify-content: space-between; } .ly-stack i.n b { width: 44%; background: var(--ink); border-radius: 3px; }
.ly-stack li.mv i.y, .ly-stack li.mv i.n b { background: #c62828; }
.ly-stack li.mv em { color: #b42318; font-weight: 800; }
.ly-stack em { font-style: normal; font-size: 13px; }
.ly-pos { font-weight: 700; color: var(--muted); }
.ly-btns { flex-wrap: wrap; gap: 8px; }
.ly-chart .ic-hexes small { font-size: 12.5px; color: var(--muted); max-width: 150px; }
.ly-legend { display: grid; grid-template-columns: 2.6em minmax(0, 1fr) 46px 1.6em 14px 46px minmax(0, 1fr); gap: 6px; margin: 12px 0 4px; padding: 0 8px; font-size: 11.5px; text-align: center; }
.ly-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ly-row { display: grid; grid-template-columns: 2.6em minmax(0, 1fr) 46px 1.6em 14px 46px minmax(0, 1fr); gap: 6px; align-items: center; padding: 7px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 13.5px; }
.ly-rows.nomv .ly-row, .ly-chart:has(.ly-rows.nomv) .ly-legend { grid-template-columns: 2.6em minmax(0, 1fr) 46px 1.6em; }
.ly-row.mv { border-color: #c62828; }
.ly-row.ly-yong { box-shadow: 0 0 0 2px #d4a83a inset; }
.ly-beast { font-size: 12.5px; color: var(--muted); font-weight: 700; text-align: center; cursor: help; }
.ly-gz { display: grid; line-height: 1.25; text-align: center; } .ly-rel { font-size: 12px; color: var(--muted); font-weight: 700; } .ly-gz span[translate] { font-size: 15px; font-weight: 700; }
.ly-bar { display: block; height: 11px; border-radius: 3px; } .ly-bar.y { background: var(--ink); } .ly-bar.n { display: flex; justify-content: space-between; } .ly-bar.n b { width: 42%; background: var(--ink); border-radius: 3px; }
.ly-bar.mv.y, .ly-bar.mv.n b { background: #c62828; }
.ly-sy b { display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; font-size: 12px; color: #fff; } .ly-sy .shi { background: #7a2e9e; } .ly-sy .ying { background: #2d6a9f; }
.ly-ar { color: #c62828; font-weight: 800; text-align: center; }
.ly-tags { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; } .ly-tags:empty { display: none; }
.ly-tag { display: inline-flex; align-items: center; height: 21px; box-sizing: border-box; overflow: hidden; font-style: normal; font-size: 11.5px; line-height: 1; white-space: nowrap; font-weight: 800; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); }
.ly-tag.mv { background: #fde0dc; border-color: #cc2f2f; color: #7a1414; } .ly-tag.po { background: #fde9dd; border-color: #e0855a; color: #6e2c0b; } .ly-tag.kong { background: #e3ecfb; border-color: #7f9fdb; color: #1d3a6e; }
.ly-tag.t-yong { background: #fbf0c8; border-color: #c9a227; color: #4d3b05; } .ly-tag.yuan { background: #dff3e4; border-color: #4caf6e; color: #14532d; } .ly-tag.ji { background: #ece4f7; border-color: #8e6cc2; color: #3b1f66; } .ly-tag.good { background: #dff3e4; border-color: #4caf6e; color: #14532d; }
.ly-fu { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; border: 1px dashed var(--line); }
.ly-tabs button { flex: none; padding: 7px 12px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; min-height: 38px; }
.ly-tabs button.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.ly-interp section[hidden] { display: none; }
.ly-gauge { height: 14px; border-radius: 999px; background: linear-gradient(90deg, #3b6fd1, #d9b43a, #cc2f2f); margin: 6px 0 4px; }
.ly-gauge div { height: 100%; border-right: 4px solid var(--ink); }
.ly-score { display: flex; align-items: baseline; gap: 6px; margin: 6px 0 8px; } .ly-score b { font-size: 30px; } .ly-score > span:not(.ic-grade) { color: var(--muted); }
.ly-sum { margin: 8px 0 0; padding-left: 20px; } .ly-sum li { margin: 4px 0; line-height: 1.7; }
.ly-ytbl td, .ly-ytbl th { font-size: 13.5px; }
.ly-move { padding: 10px 12px; border: 1px solid var(--line); border-left: 4px solid #c62828; border-radius: 10px; margin: 0 0 8px; } .ly-move p { margin: 0 0 4px; } .ly-move ul { margin: 4px 0 0; padding-left: 20px; }
.ly-cause { padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.ly-dates { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .ly-dates li { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; } .ly-dates p { margin: 0; }
.ly-dl { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; } .ly-dl b { font-size: 20px; } .ly-when2 { font-weight: 700; color: var(--seal); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ly-stack li.mv em { color: #ff8a80; } }
:root[data-theme="dark"] .ly-stack li.mv em { color: #ff8a80; }
@media (max-width: 520px) {
  .ly-pil b { font-size: 18px; } .ly-coin { width: 56px; height: 56px; }
  .ly-row, .ly-legend { grid-template-columns: 2.3em minmax(0, 1fr) 34px 1.5em 10px 34px minmax(0, 1fr); gap: 4px; padding-left: 5px; padding-right: 5px; }
  .ly-rows.nomv .ly-row, .ly-chart:has(.ly-rows.nomv) .ly-legend { grid-template-columns: 2.3em minmax(0, 1fr) 34px 1.5em; }
  .ly-gz span[translate] { font-size: 13.5px; } .ly-beast { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) { .ly-coin.spin { animation: none; } .ly-stack li:not(.empty) i { animation: none; } }
.ly-tabs { flex-wrap: wrap; overflow: visible; }

/* 육임점: 점친 때 · 장소 · 천지반도 · 사과 · 삼전 · 해석 */
#lrQ { width: 100%; min-height: 84px; padding: 10px 12px; border: 1.5px solid var(--field-border); border-radius: 12px; background: var(--field-bg); color: var(--ink); font: inherit; resize: vertical; }
.lr-sel, .lr-custom input { min-height: 44px; font-size: 16px; padding: 0 10px; border: 1.5px solid var(--field-border); border-radius: 12px; background: var(--field-bg, var(--surface)); color: var(--ink); width: 100%; max-width: 100%; }
.lr-custom { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 8px 0 0; }
.lr-custom[hidden] { display: none; }
.lr-custom label { display: grid; gap: 2px; font-size: 13px; font-weight: 700; }
.lr-custom p { grid-column: 1 / -1; margin: 0; }
.lr-tinfo { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.lr-tinfo li { display: grid; grid-template-columns: 6.5em 1fr; gap: 2px 10px; align-items: baseline; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.lr-tinfo span { font-size: 12.5px; font-weight: 700; color: var(--muted); grid-row: span 2; }
.lr-tinfo b { font-size: 17px; } .lr-tinfo small { font-size: 12.5px; color: var(--muted); }
.lr-warn { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; background: #fde9dd; color: #6e2c0b; border: 1px solid #e0855a; font-size: 14px; }
.lr-plate { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; max-width: 420px; margin: 8px auto 0; }
.lr-cell { position: relative; display: grid; justify-items: center; align-content: center; gap: 0; min-height: 76px; padding: 4px 2px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); }
.lr-cell b { font-size: 26px; line-height: 1.1; }
.lr-cell small { font-size: 12px; color: var(--muted); font-weight: 700; } .lr-cell small em { font-style: normal; color: var(--seal); }
.lr-cell.ch { border-color: #c62828; box-shadow: 0 0 0 1px #c62828 inset; }
.lr-cell.kong { border-style: dashed; }
.lr-cell u { position: absolute; top: 3px; right: 5px; text-decoration: none; font-size: 11px; font-weight: 800; color: #fff; background: #b42318; border-radius: 6px; padding: 0 4px; }
.lr-gen { font-style: normal; font-size: 12px; font-weight: 800; color: var(--muted); cursor: help; }
.lr-gen.good { color: #1f7a45; }
.lr-mid { grid-column: 2 / span 2; grid-row: 2 / span 2; display: grid; align-content: center; justify-items: center; gap: 2px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); text-align: center; font-size: 13px; }
.lr-mid b { font-size: 22px; }
.lr-kes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 4px 0 10px; }
.lr-ke { display: grid; justify-items: center; gap: 3px; padding: 8px 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.lr-ke .lr-kn { font-size: 12px; font-weight: 700; color: var(--muted); }
.lr-ke b { font-size: 26px; line-height: 1.1; } .lr-ke .lr-lo { font-size: 17px; border-top: 1.5px solid var(--line); padding-top: 2px; min-width: 2em; text-align: center; }
.lr-class { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); margin: 0 0 10px; } .lr-class p { margin: 0 0 4px; }
.lr-chuan { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lr-row { display: grid; grid-template-columns: 3em 1.6em 2.2em minmax(0, 1fr); gap: 4px 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.lr-row.ly-yong { box-shadow: 0 0 0 2px #d4a83a inset; }
.lr-cn { font-weight: 800; color: var(--seal); } .lr-dun { font-size: 16px; color: var(--muted); text-align: center; } .lr-dun i { font-style: normal; font-size: 13px; color: #1d3a6e; }
.lr-row b { font-size: 26px; line-height: 1; }
.lr-meta { display: grid; font-size: 13.5px; } .lr-meta i { font-style: normal; color: var(--muted); }
.lr-flow { list-style: none; margin: 0 0 8px; padding: 0; } .lr-flow li { padding: 6px 0; } .lr-flow li.arr { color: var(--muted); font-size: 14px; padding: 0 0 0 10px; }
@media (max-width: 520px) { .lr-cell { min-height: 66px; } .lr-cell b, .lr-ke b, .lr-row b { font-size: 22px; } .lr-custom { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lr-gen.good { color: #6fdc9a; } :root:not([data-theme="light"]) .lr-dun i { color: #9cc0ff; } }
:root[data-theme="dark"] .lr-gen.good { color: #6fdc9a; } :root[data-theme="dark"] .lr-dun i { color: #9cc0ff; }

/* 당사주: 네 별 카드 · 별 풀이 · 12성 모아 보기 */
.dsj-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.dsj-card { display: grid; justify-items: center; gap: 2px; padding: 12px 6px; border: 1.5px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); text-decoration: none; text-align: center; }
.dsj-card:hover, .dsj-card:focus-visible { border-color: var(--brand); }
.dsj-card.off { opacity: .7; border-style: dashed; }
.dsj-stage { font-size: 12.5px; font-weight: 800; color: var(--seal); } .dsj-stage i { font-style: normal; }
.dsj-emo { font-size: 34px; line-height: 1.2; font-weight: 400; }
.dsj-name { font-size: 16px; } .dsj-h { font-size: 12.5px; color: var(--muted); } .dsj-card small { font-size: 12px; color: var(--muted); }
.dsj-line { font-size: 17px; font-weight: 800; line-height: 1.6; margin: 0 0 8px; }
.dsj-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.dsj-tags span { font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--brand); }
.dsj-dl { margin: 0; display: grid; gap: 4px; } .dsj-dl dt { font-weight: 800; margin-top: 8px; } .dsj-dl dt small { font-weight: 600; color: var(--muted); } .dsj-dl dd { margin: 0; line-height: 1.75; }
.dsj-all { display: grid; gap: 8px; }
.dsj-item { border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; background: var(--surface); }
.dsj-item summary { cursor: pointer; display: grid; grid-template-columns: auto auto 1fr; gap: 2px 8px; align-items: baseline; padding: 10px 0; }
.dsj-item summary small { grid-column: 1 / -1; color: var(--muted); font-size: 13.5px; }
.dsj-item[open] { padding-bottom: 12px; }
@media (max-width: 520px) { .dsj-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 풀이 기조(2026-10-11): 결과 맨 앞의 「먼저 짚을 약점과 리스크」 */
.rf-card { border-left: 5px solid #b42318; }
.rf-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.rf-list li { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
.rf-list li.rf-danger { border-color: #e2a39b; background: #fdf0ee; }
.rf-list li.rf-warn { border-color: #e8c08a; background: #fdf6ea; }
.rf-list li.rf-info { border-color: var(--line); background: var(--surface-2); }
.rf-t { margin: 0 0 4px; line-height: 1.55; } .rf-t b { color: #7a1414; }
.rf-list li.rf-warn .rf-t b { color: #6e3a06; } .rf-list li.rf-info .rf-t b { color: var(--ink); }
.rf-why { margin: 0; font-size: 14.5px; line-height: 1.7; color: #3b2a1a; }
.rf-k { display: inline-block; font-size: 12px; font-weight: 800; color: #fff; background: #8a5a2b; border-radius: 6px; padding: 0 6px; margin-right: 4px; }
.dsj-risk { margin: 0 0 10px; padding: 8px 10px; border-radius: 10px; background: #fdf0ee; border: 1px solid #e2a39b; font-size: 14px; line-height: 1.65; color: #3b2a1a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rf-list li.rf-danger, :root:not([data-theme="light"]) .dsj-risk { background: #3a1d1a; border-color: #8a3a32; } :root:not([data-theme="light"]) .rf-list li.rf-warn { background: #3a2c16; border-color: #8a6a32; } :root:not([data-theme="light"]) .rf-t b { color: #ffb4a8; } :root:not([data-theme="light"]) .rf-list li.rf-warn .rf-t b { color: #ffd59a; } :root:not([data-theme="light"]) .rf-list li.rf-info .rf-t b { color: var(--ink); } :root:not([data-theme="light"]) .rf-why, :root:not([data-theme="light"]) .dsj-risk { color: var(--ink); } }
:root[data-theme="dark"] .rf-list li.rf-danger, :root[data-theme="dark"] .dsj-risk { background: #3a1d1a; border-color: #8a3a32; } :root[data-theme="dark"] .rf-list li.rf-warn { background: #3a2c16; border-color: #8a6a32; } :root[data-theme="dark"] .rf-t b { color: #ffb4a8; } :root[data-theme="dark"] .rf-list li.rf-warn .rf-t b { color: #ffd59a; } :root[data-theme="dark"] .rf-list li.rf-info .rf-t b { color: var(--ink); } :root[data-theme="dark"] .rf-why, :root[data-theme="dark"] .dsj-risk { color: var(--ink); }
@media (max-width: 520px) { .ny-5t th, .ny-5t td { padding-left: 3px; padding-right: 3px; font-size: 12.5px; } .ny-5t .sbar { width: 66px; min-width: 0; } }

/* 명리 고전(#/classics) — 주역공부(.ich-*)와 같은 틀 */
.cl-books { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 12px 0; }
.cl-book { display: grid; gap: 4px; padding: 14px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); text-decoration: none; }
a.cl-book:hover, a.cl-book:focus-visible { border-color: var(--brand); }
.cl-book.soon { opacity: .72; }
.cl-bhz { font-size: 28px; letter-spacing: .06em; }
.cl-bnm { font-weight: 700; font-size: 17px; }
.cl-bnm em { font-style: normal; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.cl-rd { font-size: .62em; color: var(--seal); font-weight: 700; }
.cl-toc { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.cl-toc li[hidden] { display: none; }
.cl-toc a { display: grid; gap: 1px; padding: 9px 10px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); text-decoration: none; }
.cl-toc a:hover, .cl-toc a:focus-visible { border-color: var(--brand); }
.cl-toc b { font-size: 18px; }
.cl-toc .cl-rd { font-size: 13px; }
.cl-no { font-size: 12px; color: var(--muted); font-weight: 700; }
.cl-note { margin: 8px 0 0; padding: 6px 10px; border-radius: 10px; background: var(--surface-2); }
.cl-note summary { cursor: pointer; font-weight: 700; font-size: 14px; }
.cl-note .ich-han { font-size: 19px; line-height: 2.05; }
.cl-note .ich-read { font-size: 13.5px; font-weight: 600; }
@media (max-width: 520px) { .cl-note .ich-han { font-size: 17px; } .cl-toc { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } }
.cl-soon { font-style: normal; font-size: 13px; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--surface-2); color: var(--muted); vertical-align: middle; }

/* 족상 · 발 MBTI(#/foot) */
.ft-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.ft-tp { cursor: pointer; }
.ft-tp input { position: absolute; opacity: 0; pointer-events: none; }
.ft-tpin { display: grid; justify-items: center; gap: 2px; height: 100%; padding: 8px 6px; border: 2px solid var(--line); border-radius: 12px; background: var(--surface); text-align: center; }
.ft-tpin small { font-size: 12px; color: var(--muted); line-height: 1.35; word-break: keep-all; }
.ft-tp input:checked + .ft-tpin { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 25%, transparent); }
.ft-tp input:focus-visible + .ft-tpin { outline: 2px solid var(--brand); outline-offset: 2px; }
.ft-svg { width: 64px; height: 80px; }
.ft-scan { margin: 0 0 6px; font: 700 14px/1.6 ui-monospace, Consolas, monospace; color: var(--seal); }
.ft-type { color: var(--seal); }
.ft-rare { margin: 0 0 6px; font-size: 14px; }
.ft-st th { width: 52%; text-align: left; }
.ft-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ft-tags span { padding: 3px 10px; border-radius: 999px; background: var(--surface-2); font-weight: 700; font-size: 14px; }
.ft-star { font-size: 17px; letter-spacing: 1px; white-space: nowrap; }
.ft-star-off { color: var(--muted); opacity: .6; }

/* 골상 · 자세 점검(#/bone) */
.bn-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; align-items: start; }
.bn-fig { margin: 0; text-align: center; }
.bn-svg { width: 100%; max-width: 300px; height: auto; }
.bn-r { cursor: pointer; transition: opacity .15s, filter .15s; }
.bn-r:hover, .bn-r:focus-visible, .bn-r.on { filter: brightness(1.12) drop-shadow(0 0 3px rgba(0, 0, 0, .35)); outline: none; }
.bn-svg:has(.bn-r.on) .bn-r:not(.on) { opacity: .55; }
.bn-lb { font-size: 12px; font-weight: 700; fill: var(--muted); }
.bn-lb.small { font-size: 10px; }
.bn-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 8px; }
.bn-lg { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.bn-lg.on { border-color: var(--brand); font-weight: 700; }
.bn-lg i, .bn-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.bn-info { padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); line-height: 1.7; }
.bn-info ul { margin: 4px 0 8px; padding-left: 20px; }
.bn-red { margin: 14px 0; padding: 10px 14px; border-radius: 12px; border: 1.5px solid #c62828; background: color-mix(in srgb, #c62828 7%, transparent); }
.bn-red ul { margin: 4px 0 0; padding-left: 20px; }
.bn-checks { display: grid; gap: 6px; }
.bn-score { margin: 4px 0 10px; font-size: 15px; }
.bn-score b { font-size: 40px; color: var(--seal); }
.bn-score span { margin-left: 8px; font-weight: 700; }
.bn-bar { display: inline-block; width: 140px; height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; vertical-align: middle; }
.bn-bar i { display: block; height: 100%; border-radius: 999px; }
.bn-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bn-chips span { padding: 3px 10px; border-radius: 999px; background: var(--surface-2); font-weight: 700; font-size: 14px; }
@media (max-width: 620px) { .bn-wrap { grid-template-columns: 1fr; } .bn-svg { max-width: 240px; } .bn-bar { width: 90px; } }

/* 마의상법 핵심 정리(#/mayi) */
.my-toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.my-sec h3 { margin-top: 0; }
.my-rd { margin-left: 3px; color: var(--seal); font-weight: 700; }
.my-tbl th { width: 30%; text-align: left; vertical-align: top; }
.my-svg { width: 100%; max-width: 300px; height: auto; }
.my-pt { cursor: pointer; }
.my-pt circle { fill: #fff; stroke: #6a4bd6; stroke-width: 2; }
.my-pt text { font-size: 11px; font-weight: 800; fill: #6a4bd6; }
.my-pt.on circle, .my-pt:hover circle, .my-pt:focus-visible circle { fill: #6a4bd6; outline: none; }
.my-pt.on text, .my-pt:hover text, .my-pt:focus-visible text { fill: #fff; }
.my-lb { font-size: 11px; font-weight: 700; fill: #c62828; opacity: .7; }
.my-gl { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; padding-left: 22px; margin: 10px 0; }
.my-gb { width: 100%; text-align: left; padding: 4px 8px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.my-gb.on { border-color: var(--brand); }
.my-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.my-chips span { padding: 3px 10px; border-radius: 999px; background: var(--surface-2); font-size: 14px; }
.my-good, .my-care { display: inline-block; padding: 0 6px; margin-right: 4px; border-radius: 6px; font-size: 12px; font-weight: 700; color: #fff; }
.my-good { background: #2e8b57; } .my-care { background: #b5483a; }
.my-quote { padding: 10px 14px; border-left: 4px solid var(--seal); background: var(--surface-2); border-radius: 8px; }
/* 명리 고전 — 편 해설(궁통보감) · 한글음 없는 평주 · 명조 예시 */
.cl-sh { margin: 4px 0 14px; padding: 10px 12px; border-left: 4px solid var(--accent, #7a4fb5); border-radius: 8px; background: var(--surface-2); }
.cl-sh b { margin-right: 6px; }
.cl-plain { margin: 6px 0; font-size: 16px; line-height: 1.9; word-break: break-all; }
.cl-cn { margin-top: 14px; }

/* 점성술(#/astro) */
.as-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.as-row input[type="time"]:disabled { opacity: .5; }
.as-note { color: var(--accent); }
.as-slogan { font-size: 20px; font-weight: 800; line-height: 1.5; margin: 4px 0 8px; }
.as-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.as-tags span { padding: 4px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--ink); font-weight: 700; font-size: 14px; }
.as-bigs { display: grid; gap: 10px; }
.as-big { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.as-bg { font-size: 34px; line-height: 52px; text-align: center; font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", var(--sans); }
.as-bl { margin: 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.as-bs { margin: 2px 0 4px; font-size: 17px; }
.as-bs .as-pct { font-size: 14px; font-weight: 800; margin-left: 4px; }
.as-big p.small { margin: 0; }
.as-figs { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px; align-items: center; margin: 14px 0 6px; }
.as-figs figure { margin: 0; text-align: center; }
.as-wheel, .as-radar { width: 100%; max-width: 340px; height: auto; color: var(--ink); }
.as-wg { font-size: 16px; text-anchor: middle; dominant-baseline: central; font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", sans-serif; }
.as-wp { fill: var(--surface); stroke: currentColor; stroke-opacity: .55; }
.as-wpg { font-size: 13px; text-anchor: middle; dominant-baseline: central; fill: currentColor; font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", sans-serif; }
.as-wr { font-size: 8px; fill: #d0343a; font-weight: 700; }
.as-wl { font-size: 10px; font-weight: 800; fill: currentColor; }
.as-rl { font-size: 12px; font-weight: 800; }
.as-r { color: #c62828; font-style: normal; font-weight: 700; }
.as-tbl th { white-space: nowrap; }
.as-asp, .as-sky { margin: 4px 0 0; padding-left: 18px; }
.as-asp li, .as-sky li { margin: 4px 0; }
.as-det summary { cursor: pointer; font-weight: 700; margin-top: 8px; }
.as-gauge { margin: 10px 0 12px; }
.as-gt { margin: 0 0 4px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.as-gv { margin-left: auto; font-size: 20px; }
.as-gauge p.small { margin: 4px 0 0; }
.as-bar { display: block; height: 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.as-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #f6b73c, #e4572e); }
.as-bar.love i { background: linear-gradient(90deg, #ff9fbc, #e0457b); }
.as-bar.mental i { background: linear-gradient(90deg, #8ec5ff, #5b5bd6); }
.as-wkwrap { overflow-x: auto; }
.as-wk td { min-width: 70px; }
.as-wk td .as-bar { height: 8px; }
.as-wk td small { font-weight: 700; }
.as-rx li { margin: 6px 0 12px; }
.as-rx li p { margin: 2px 0 0; }
.as-share { white-space: pre-wrap; word-break: break-word; font-family: var(--sans); font-size: 14px; line-height: 1.7; padding: 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
@media (max-width: 620px) { .as-figs { grid-template-columns: minmax(0, 1fr); } .as-slogan { font-size: 18px; } }
:root { --as0: #c23a1f; --as1: #7a5b20; --as2: #23689a; --as3: #17665f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --as0: #ff8a6b; --as1: #e0b866; --as2: #7cc0f0; --as3: #5fd0c2; } }
:root[data-theme="dark"] { --as0: #ff8a6b; --as1: #e0b866; --as2: #7cc0f0; --as3: #5fd0c2; }

/* 명리고전 한자 말풍선 · 삼명통회(#/sammyung) */
.hz { cursor: help; border-radius: 3px; }
.hz:hover, .hz:focus { background: var(--accent-soft); }
.sm-hz { color: var(--muted); font-weight: 600; }
.sm-sec .sec-title { margin-top: 0; }
.sm-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 8px; }
.sm-item { border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); padding: 8px 12px; }
.sm-item summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.sm-pair { font-size: 13px; color: var(--muted); }
.sm-el { margin-left: auto; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.sm-steps { margin: 8px 0 4px; padding-left: 0; list-style: none; display: grid; gap: 6px; }
.sm-steps li { line-height: 1.65; }
.sm-sl { display: inline-block; font-size: 12px; font-weight: 800; color: var(--brand); margin-right: 4px; }
.sm-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; }
.sm-tags span { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); }
.sm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
#smQ { width: 100%; min-height: 84px; font-size: 16px; padding: 10px 12px; border: 1.5px solid var(--field-border); border-radius: 12px; background: var(--field-bg, var(--surface)); color: var(--ink); }
.sm-q { margin: 14px 0 6px; font-weight: 700; padding: 8px 12px; border-radius: 12px; background: var(--accent-soft); }
.sm-a h4 { margin: 12px 0 4px; }
.sm-tblw { overflow-x: auto; margin: 8px 0; }
.sm-tbl th, .sm-tbl td { vertical-align: top; }
/* 삼명통회 원문(#/sammyung/text) */
.sm-tabs { margin-bottom: 12px; }
.sm-vols { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 10px; margin: 12px 0; }
.sm-vol { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); color: var(--ink); text-decoration: none; }
.sm-vol b { font-size: 17px; }
.sm-vol em { font-style: normal; font-weight: 800; color: var(--brand); }
.sm-vol.off { opacity: .6; }
.sm-vol.off em { color: var(--muted); }
a.sm-vol:hover { border-color: var(--brand); }
.cl-hl { display: inline-block; font-size: 12px; padding: 1px 7px; margin-right: 4px; border-radius: 999px; background: var(--accent-soft); color: var(--ink); }
.cl-3 p { margin: 4px 0; }
.cl-3 p + p { padding-top: 4px; border-top: 1px dashed var(--line); }
.cl-gl { margin-top: 14px; }
.cl-glg { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 10px; margin-top: 8px; font-size: 14px; }
.cl-gli b { display: inline-block; min-width: 1.4em; margin-right: 6px; font-size: 19px; font-weight: 700; }
.cl-dan { margin: 10px 0 0; padding: 8px 10px 6px; border-left: 3px solid var(--accent-soft); border-radius: 0 10px 10px 0; background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.cl-dan + .cl-dan { margin-top: 12px; }
.cl-dn { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5em; height: 1.5em; margin-right: 6px; border-radius: 999px; background: var(--accent-soft); color: var(--ink); font-size: 13px; font-weight: 700; vertical-align: middle; }
.cl-dan .ich-han { margin-bottom: 4px; }
.cl-pr { margin-top: 12px; }
/* 📖 자세한 풀이 */
.cl-x { margin: 8px 0 2px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius: 10px; background: var(--surface); font-size: 15px; line-height: 1.8; }
.cl-x p { margin: 0; }
.cl-x p + p { margin-top: 8px; }
.cl-x b { color: var(--accent); }
.cl-xh { font-weight: 700; color: var(--ink); }
.cl-xf summary { cursor: pointer; font-weight: 700; }
.cl-xf[open] summary { margin-bottom: 6px; }
.ich-wrap.no-x .cl-x { display: none; }

/* 고전으로 읽는 내 사주 (정통사주 6번 카드) */
.cm-h { margin: 20px 0 6px; font-size: 17px; }
.cm-item { margin: 10px 0 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.cm-item.risk { border-left: 5px solid #b42318; }
.cm-src { margin: 0 0 6px; line-height: 1.6; }
.cm-hz { color: var(--muted); font-size: 14px; }
.cm-link { margin-left: 4px; font-size: 14px; white-space: nowrap; }
.cm-why { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0 0 4px; font-size: 14.5px; line-height: 1.6; }
.cm-why > b { flex: 1 0 100%; }
.cm-k { font-size: 13px; color: var(--muted); }
.cm-chip { padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); font-size: 13.5px; }
.cm-item .ich-han { font-size: 21px; line-height: 2; }
.cm-more { margin-top: 8px; }
.cm-more > summary { cursor: pointer; font-size: 14.5px; color: var(--accent); }
.cm-ai { margin-top: 18px; padding-top: 12px; border-top: 1px dashed var(--line); }
@media (max-width: 620px) { .cm-item { padding: 10px 10px; } .cm-item .ich-han { font-size: 19px; } }

/* 생기복덕 표시(2026-10-20) — 달력 칸 바탕은 점수 색이라 이름표는 밝은 바탕 고정(.jg 와 같은 방식) */
/* 이름표 = 해당 색 바탕 + 흰 글자(대비 7:1 이상), 점수 색 칸 위에서도 구분되게 흰 테두리 */
.sgb { display: inline-block; font-size: 9.5px; font-weight: 800; line-height: 1.25; padding: 0 4px; border-radius: 5px; color: #fff; border: 1px solid rgba(255, 255, 255, .9); white-space: nowrap; }
.sgb.sg-good { background: #a3150c; }
.sgb.sg-mid { background: #5b5346; font-weight: 600; }
.sgb.sg-bad { background: #1f3f86; }
.chip.sgc.sg-good { color: #a3150c; } .chip.sgc.sg-bad { color: #1f3f86; }
:root[data-theme="dark"] .chip.sgc.sg-good { color: #ff8f80; } :root[data-theme="dark"] .chip.sgc.sg-bad { color: #8fb4ff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chip.sgc.sg-good { color: #ff8f80; } :root:not([data-theme="light"]) .chip.sgc.sg-bad { color: #8fb4ff; } }
.sg-box { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line, rgba(0,0,0,.2)); }
.sg-h { margin: 0 0 6px; font-size: 16px; }
.sg-tg { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; white-space: nowrap; }
.sg-legend { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 4px 12px; }
@media (max-width: 620px) { .cell .sgb { font-size: 9px; padding: 0 2px; } }

/* 구성방위(2026-10-20) — 길 붉은 · 흉 파랑 · 주의 노랑(사이트 규칙: 신중 = 파랑, 좋음 = 빨강) */
:root { --ks-good: #fbe3df; --ks-good-b: #a3150c; --ks-bad: #e1e7f4; --ks-bad-b: #1f3f86; --ks-warn: #fbf0d0; --ks-warn-b: #8a6200; --ks-plain: #f3ede0; --ks-plain-b: #9a8a6c; }
:root[data-theme="dark"] { --ks-good: #4a1d18; --ks-good-b: #ff8f80; --ks-bad: #1b2742; --ks-bad-b: #8fb4ff; --ks-warn: #3d3015; --ks-warn-b: #f0c35a; --ks-plain: #2c261d; --ks-plain-b: #8f816a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ks-good: #4a1d18; --ks-good-b: #ff8f80; --ks-bad: #1b2742; --ks-bad-b: #8fb4ff; --ks-warn: #3d3015; --ks-warn-b: #f0c35a; --ks-plain: #2c261d; --ks-plain-b: #8f816a; } }
.ks-star { display: inline-block; font-weight: 800; font-size: 12px; line-height: 1.3; padding: 1px 6px; border-radius: 6px; border: 1px solid rgba(0, 0, 0, .25); white-space: nowrap; vertical-align: middle; }
.ks-star.big { font-size: 15px; padding: 2px 8px; }
.ks-me-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 10px; }
.ks-big { margin: 4px 0 0; font-size: 17px; }
.ks-modes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.ks-modes .chip { cursor: pointer; font-size: 15px; padding: 8px 14px; }
.ks-modes .chip.on { background: var(--ks-good-b); color: #fff; border-color: var(--ks-good-b); }
:root[data-theme="dark"] .ks-modes .chip.on { color: #2a1206; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ks-modes .chip.on { color: #2a1206; } }
.ks-cwrap { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 16px; align-items: center; }
@media (max-width: 620px) { .ks-cwrap { grid-template-columns: minmax(0, 1fr); } }
.ks-compass { width: 100%; max-width: 340px; height: auto; display: block; margin: 0 auto; }
.ks-sec { stroke: var(--paper, #fffaf0); stroke-width: 2; }
.ks-sec.good { fill: var(--ks-good); stroke: var(--ks-good-b); }
.ks-sec.bad { fill: var(--ks-bad); stroke: var(--ks-bad-b); }
.ks-sec.warn { fill: var(--ks-warn); stroke: var(--ks-warn-b); }
.ks-sec.plain { fill: var(--ks-plain); stroke: var(--ks-plain-b); }
.ks-sl { font-size: 14px; font-weight: 700; fill: var(--ink); }
.ks-sl.s { font-size: 15px; font-weight: 800; }
.ks-sl.m { font-size: 16px; font-weight: 900; }
.ks-sl.good { fill: var(--ks-good-b); } .ks-sl.bad { fill: var(--ks-bad-b); } .ks-sl.warn { fill: var(--ks-warn-b); }
.ks-n { font-size: 13px; font-weight: 800; fill: var(--ks-good-b); }
.ks-legend p { margin: 4px 0; }
.ks-sw { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; border: 2px solid; }
.ks-sw.good { background: var(--ks-good); border-color: var(--ks-good-b); } .ks-sw.bad { background: var(--ks-bad); border-color: var(--ks-bad-b); }
.ks-sw.warn { background: var(--ks-warn); border-color: var(--ks-warn-b); } .ks-sw.plain { background: var(--ks-plain); border-color: var(--ks-plain-b); }
.ks-h { margin: 16px 0 6px; font-size: 16px; }
.ks-goods { margin: 0; padding-left: 18px; } .ks-goods li { margin: 6px 0; }
.ks-boards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 14px; }
.ks-board { margin: 0; } .ks-board figcaption { font-size: 14px; margin-bottom: 6px; }
.ks-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.ks-cell { min-width: 0; border-radius: 8px; padding: 6px 2px; text-align: center; background: var(--ks-plain); border: 1.5px solid var(--ks-plain-b); display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 76px; }
.ks-cell.c { border-style: double; border-width: 3px; }
.ks-cell.good { background: var(--ks-good); border-color: var(--ks-good-b); } .ks-cell.bad { background: var(--ks-bad); border-color: var(--ks-bad-b); } .ks-cell.warn { background: var(--ks-warn); border-color: var(--ks-warn-b); }
.ks-dn { font-size: 12px; font-weight: 700; }
.ks-tag { font-style: normal; font-size: 10.5px; font-weight: 700; line-height: 1.2; padding: 0 4px; border-radius: 4px; color: #fff; overflow-wrap: anywhere; }
.ks-tag.bad { background: #1f3f86; } .ks-tag.good { background: #a3150c; } .ks-tag.warn { background: #8a6200; }
.ks-how ul { padding-left: 18px; } .ks-how li { margin: 5px 0; }

/* 자미두수 명반(2026-10-20) — 4×4 판, 가운데 2×2 정보. 사화 색: 祿 초록 · 權 주황 · 科 파랑 · 忌 검정 */
.zw-yrnav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
.zw-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(118px, auto)); gap: 4px; }
.zw-cell { min-width: 0; text-align: left; font: inherit; color: var(--ink); background: color-mix(in srgb, var(--paper-hi, #fffaf0) 88%, transparent); border: 1.5px solid #c9b48a; border-radius: 8px; padding: 5px 5px 4px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; position: relative; }
.zw-cell:hover { border-color: #6a4bc4; }
.zw-cell.ming { border-color: #a3150c; border-width: 2.5px; }
.zw-cell.sel { outline: 3px solid #6a4bc4; outline-offset: 1px; background: color-mix(in srgb, #6a4bc4 12%, var(--paper-hi, #fffaf0)); }
.zw-cell.tri { background: color-mix(in srgb, #6a4bc4 7%, var(--paper-hi, #fffaf0)); border-style: dashed; border-color: #8a72d6; }
.zw-cell.opp { background: color-mix(in srgb, #6a4bc4 9%, var(--paper-hi, #fffaf0)); border-color: #8a72d6; }
.zw-mains { display: flex; flex-wrap: wrap; gap: 1px 5px; }
.zw-st { font-size: 14.5px; font-weight: 800; line-height: 1.25; color: #3b1f8a; white-space: nowrap; }
:root[data-theme="dark"] .zw-st { color: #c9b8ff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .zw-st { color: #c9b8ff; } }
.zw-lv { font-size: 10px; font-weight: 700; margin-left: 1px; color: var(--muted); }
.zw-lv.l6, .zw-lv.l5 { color: #a3150c; } .zw-lv.l1 { color: #1f3f86; }
:root[data-theme="dark"] .zw-lv.l6, :root[data-theme="dark"] .zw-lv.l5 { color: #ff8f80; } :root[data-theme="dark"] .zw-lv.l1 { color: #8fb4ff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .zw-lv.l6, :root:not([data-theme="light"]) .zw-lv.l5 { color: #ff8f80; } :root:not([data-theme="light"]) .zw-lv.l1 { color: #8fb4ff; } }
.zw-empty { font-size: 11.5px; color: var(--muted); }
.zw-subs { display: flex; flex-wrap: wrap; gap: 0 4px; font-size: 11.5px; line-height: 1.3; }
.zw-sub.lucky { color: #17694a; } .zw-sub.bad { color: #6b5f4d; }
:root[data-theme="dark"] .zw-sub.lucky { color: #6fd3a5; } :root[data-theme="dark"] .zw-sub.bad { color: #cbbfa6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .zw-sub.lucky { color: #6fd3a5; } :root:not([data-theme="light"]) .zw-sub.bad { color: #cbbfa6; } }
.zw-hua { display: inline-block; font-style: normal; font-size: 10px; font-weight: 800; line-height: 1.2; padding: 0 3px; margin-left: 2px; border-radius: 4px; color: #fff; vertical-align: 1px; }
.zw-hua.lu { background: #2e7d32; } .zw-hua.quan { background: #c15a00; } .zw-hua.ke { background: #1f5fae; } .zw-hua.ji { background: #1b1b1f; border: 1px solid #fff; }
.zw-foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: 0 5px; align-items: baseline; font-size: 11.5px; border-top: 1px dotted #c9b48a; padding-top: 2px; }
.zw-role { font-weight: 800; color: #a3150c; } .zw-cell:not(.ming) .zw-role { color: var(--ink); }
:root[data-theme="dark"] .zw-cell.ming .zw-role, :root[data-theme="dark"] .zw-yr { color: #ff8f80; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .zw-cell.ming .zw-role, :root:not([data-theme="light"]) .zw-yr { color: #ff8f80; } }
.zw-gz { font-weight: 700; } .zw-dx { color: var(--muted); margin-left: auto; }
.zw-mks { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 2px; }
.zw-mk { font-style: normal; font-size: 9.5px; font-weight: 800; line-height: 1.2; padding: 0 3px; border-radius: 4px; color: #fff; }
.zw-mk.shen { background: #6a4bc4; } .zw-mk.dx { background: #a3150c; } .zw-mk.ln { background: #c15a00; } .zw-mk.xx { background: #6b5f4d; }
.zw-center { border: 1.5px dashed #c9b48a; border-radius: 10px; padding: 10px; display: flex; flex-direction: column; justify-content: center; text-align: center; gap: 2px; min-width: 0; }
.zw-center p { margin: 0; font-size: 13px; line-height: 1.45; }
.zw-cname { font-size: 18px !important; font-weight: 800; }
.zw-yr { font-weight: 700; color: #a3150c; }
.zw-legend { font-size: 11.5px !important; color: var(--muted); }
.zw-pal { margin-top: 12px; padding: 12px 14px; border: 1.5px solid #8a72d6; border-radius: 10px; background: color-mix(in srgb, #6a4bc4 6%, transparent); }
.zw-ph { margin: 12px 0 4px; font-size: 16px; } .zw-pal .zw-ph { margin-top: 0; }
.zw-list { margin: 4px 0; padding-left: 18px; } .zw-list li { margin: 5px 0; }
.zw-risk { color: #1f3f86; }
:root[data-theme="dark"] .zw-risk { color: #8fb4ff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .zw-risk { color: #8fb4ff; } }
.zw-pat { margin: 6px 0; padding: 6px 10px; border-left: 4px solid #8a72d6; background: color-mix(in srgb, #6a4bc4 6%, transparent); border-radius: 0 8px 8px 0; }
.zw-pat.good { border-color: #a3150c; } .zw-pat.bad { border-color: #1f3f86; }
.zw-hchip { display: inline-block; margin: 2px 4px 2px 0; padding: 1px 7px; border-radius: 10px; font-size: 12.5px; border: 1px solid; }
.zw-hchip.lu { color: #2e7d32; } .zw-hchip.quan { color: #c15a00; } .zw-hchip.ke { color: #1f5fae; } .zw-hchip.ji { color: var(--ink); font-weight: 700; }
.zw-dxt tr.now th, .zw-dxt tr.now td { background: color-mix(in srgb, #a3150c 12%, transparent); font-weight: 700; }
.zw-how ul { padding-left: 18px; } .zw-how li { margin: 5px 0; }
@media (max-width: 620px) {
  .zw-board { grid-template-rows: repeat(4, minmax(104px, auto)); gap: 2px; }
  .zw-cell { padding: 3px 2px 2px; border-radius: 6px; }
  .zw-st { font-size: 12px; } .zw-lv { font-size: 8.5px; }
  .zw-subs { font-size: 9.5px; gap: 0 2px; } .zw-hua { font-size: 8.5px; padding: 0 2px; margin-left: 1px; }
  .zw-foot { font-size: 9.5px; gap: 0 3px; } .zw-dx { margin-left: 0; }
  .zw-mk { font-size: 8px; padding: 0 2px; }
  .zw-center { padding: 4px; } .zw-center p { font-size: 11px; } .zw-cname { font-size: 14px !important; }
}

.ai-hr { border: 0; border-top: 1px dashed var(--muted); opacity: .5; margin: 12px 0; }

/* 기문둔갑 구궁반(2026-10-21) — 3×3, 위가 남쪽. 길 붉은 · 흉 파랑 · 공망 점선 */
.qm-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; max-width: 560px; margin: 8px auto 0; }
.qm-cell { min-width: 0; min-height: 150px; border: 1.5px solid #c9b48a; border-radius: 10px; padding: 6px; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; background: color-mix(in srgb, var(--paper-hi, #fffaf0) 88%, transparent); }
.qm-cell.good { border-color: var(--ks-good-b); background: var(--ks-good); }
.qm-cell.bad { border-color: var(--ks-bad-b); background: var(--ks-bad); }
.qm-cell.kong { border-style: dashed; border-width: 2px; }
.qm-cell.c { justify-content: center; border-style: double; border-width: 3px; }
.qm-god { font-size: 13px; font-weight: 700; color: var(--muted); }
.qm-god.g { color: var(--ks-good-b); }
.qm-heaven { font-size: 22px; line-height: 1.15; }
.qm-heaven small { display: block; font-size: 13px; font-weight: 700; }
.qm-heaven i, .qm-gate i { font-style: normal; }
.qm-gate { font-size: 17px; font-weight: 800; padding: 0 8px; border-radius: 6px; border: 1.5px solid currentColor; }
.qm-gate.g { box-shadow: 0 0 0 2px var(--ks-good-b); }
.qm-earth { font-size: 15px; color: var(--muted); }
.qm-earth b { font-size: 17px; }
.qm-pn { margin-top: auto; font-size: 12px; font-weight: 700; }
.qm-pn em { font-style: normal; font-size: 10.5px; padding: 0 4px; border-radius: 4px; background: #6a4bc4; color: #fff; margin-left: 2px; }
.qm-pn em.k { background: #6b5f4d; }
.qm-flags { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
.qm-flags i { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 0 4px; border-radius: 4px; color: #fff; }
.qm-flags i.b { background: #1f3f86; } .qm-flags i.g { background: #a3150c; }
.qm-h { margin: 14px 0 6px; font-size: 16px; }
.qm-goods { margin: 0; padding-left: 18px; } .qm-goods li { margin: 6px 0; }
.qm-k { color: #6b5f4d; } .qm-b { color: var(--ks-bad-b); }
.qm-json pre { max-height: 360px; overflow: auto; font-size: 12px; background: color-mix(in srgb, var(--ink) 6%, transparent); padding: 10px; border-radius: 8px; white-space: pre; }
.qm-how ul { padding-left: 18px; } .qm-how li { margin: 5px 0; }
@media (max-width: 620px) {
  .qm-board { gap: 3px; } .qm-cell { min-height: 132px; padding: 4px 2px; }
  .qm-heaven { font-size: 18px; } .qm-heaven small { font-size: 11px; } .qm-gate { font-size: 14px; padding: 0 4px; }
  .qm-earth, .qm-earth b { font-size: 13px; } .qm-pn { font-size: 10px; } .qm-pn em, .qm-flags i { font-size: 9px; }
}
.qm-heaven i, .qm-gate i { background: none; }
.qm-hong { font-size: 13px; font-weight: 700; padding: 0 6px; border-radius: 6px; border: 1px dashed #8a72d6; }
.qm-hong b { background: none; font-size: 15px; } .qm-hong small { font-size: 10.5px; color: var(--muted); }
.qm-hongt td b { background: none; font-size: 16px; }
@media (max-width: 620px) { .qm-hong { font-size: 11px; padding: 0 3px; } .qm-hong b { font-size: 12px; } .qm-hong small { font-size: 9px; } }

/* 간지로 생년월일시 찾기(2026-10-21) */
.gz-in { border: 1px dashed var(--field-border, #8f7b58); border-radius: 10px; padding: 6px 10px; }
.gz-in summary { cursor: pointer; font-weight: 700; padding: 4px 0; }
.gz-sel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 6px 0 8px; }
.gz-sel label { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; }
.gz-sel select { min-width: 0; width: 100%; }
.gz-picks { display: flex; flex-direction: column; gap: 6px; }
.gz-pick { text-align: left; }
@media (max-width: 620px) { .gz-sel { gap: 4px; } }
.gz-sel .gz-h { grid-column: 1 / -1; }
.cm-theme { margin: 14px 0 6px; font-size: 16px; }

/* 고전으로 읽는 내 사주 — 비춰 볼 고전 고르기 */
.cm-picker { margin: 6px 0 10px; padding: 8px 12px; border: 1px solid var(--line, #c9b98f); border-radius: 12px; background: var(--surface, rgba(255,250,236,.7)); }
.cm-picker > summary { cursor: pointer; font-weight: 700; }
.cm-pk-g { margin: 8px 0 0; padding: 6px 10px 8px; border: 1px dashed var(--line, #c9b98f); border-radius: 10px; }
.cm-pk-g legend { padding: 0 6px; font-size: 13px; font-weight: 700; }
.cm-pk { display: inline-flex; align-items: center; gap: 4px; margin: 4px 12px 4px 0; font-size: 14px; white-space: nowrap; }
.cm-pk input { width: 18px; height: 18px; }
.cm-pk-act { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px; }

/* 고전 구절 — 「내 명식」 부분을 눈에 띄게 */
.cm-why .cm-k { padding: 2px 9px; border-radius: 6px; background: #5b3fc4; color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .02em; }
.cm-why .cm-chip { padding: 2px 10px; border: 1.5px solid #c98a12; background: #fff0b8; color: #4a2800; font-size: 14px; font-weight: 800; box-shadow: 0 1px 0 rgba(120, 80, 0, .25); }
.cm-item.risk .cm-why .cm-chip { border-color: #b3261e; background: #ffe0dc; color: #6a0f0a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cm-why .cm-k { background: #b7a4ff; color: #1b1030; }
  :root:not([data-theme="light"]) .cm-why .cm-chip { border-color: #e0b040; background: #4a3a10; color: #ffe9a8; box-shadow: none; }
  :root:not([data-theme="light"]) .cm-item.risk .cm-why .cm-chip { border-color: #ff7b80; background: #4a1a1c; color: #ffd3d5; }
}
:root[data-theme="dark"] .cm-why .cm-k { background: #b7a4ff; color: #1b1030; }
:root[data-theme="dark"] .cm-why .cm-chip { border-color: #e0b040; background: #4a3a10; color: #ffe9a8; box-shadow: none; }
:root[data-theme="dark"] .cm-item.risk .cm-why .cm-chip { border-color: #ff7b80; background: #4a1a1c; color: #ffd3d5; }
.cm-my { padding: 1px 8px; border-radius: 6px; background: #fff0b8; color: #4a2800; font-weight: 800; border: 1.5px solid #c98a12; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cm-my { background: #4a3a10; color: #ffe9a8; border-color: #e0b040; } }
:root[data-theme="dark"] .cm-my { background: #4a3a10; color: #ffe9a8; border-color: #e0b040; }

/* 종합 — 나의 기질과 삶의 태도(핵심 요약 카드) */
.ns-card { border: 2px solid var(--accent); background: linear-gradient(180deg, var(--accent-soft) 0, var(--surface) 130px); }
.ns-card .sec-title { font-size: 21px; }
.ns-lead { margin: 0 0 12px; font-size: 15.5px; font-weight: 600; color: var(--ink); }
.ns-hero { display: flex; gap: 16px; align-items: center; padding: 14px; margin-bottom: 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.ns-day { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 0 0 auto; }
.ns-day-k { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.ns-day .gzt { width: 44px; height: 44px; line-height: 44px; font-size: 26px; }
.ns-day-n { font-size: 14px; font-weight: 800; }
.ns-hero-t { flex: 1 1 auto; min-width: 0; }
.ns-one { margin: 0 0 10px; font-size: 17px; line-height: 1.55; }
.ns-one b { color: var(--accent); }
.ns-gauge { height: 12px; border-radius: 999px; background: linear-gradient(90deg, #2f6fdd 0, #d9b43a 50%, #d9402f 100%); opacity: .28; position: relative; }
.ns-gauge i { position: absolute; top: -4px; bottom: -4px; width: 5px; margin-left: -2px; border-radius: 3px; background: var(--ink); box-shadow: 0 0 0 2px var(--surface); opacity: 1; }
.ns-hero .ns-gauge { opacity: 1; background: linear-gradient(90deg, rgba(47,111,221,.35) 0, rgba(217,180,58,.35) 50%, rgba(217,64,47,.35) 100%); }
.ns-gl { display: flex; justify-content: space-between; gap: 6px; margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
.ns-gl b { color: var(--ink); font-size: 14px; text-align: center; }
.ns-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.ns-t { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); min-width: 0; }
.ns-k { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.ns-v { font-size: 19px; line-height: 1.35; font-weight: 800; overflow-wrap: anywhere; }
.ns-s { font-size: 12.5px; color: var(--muted); }
.ns-t.good { background: #e3f4e8; border-color: #3f9d5b; } .ns-t.good .ns-v { color: #11532a; }
.ns-t.bad { background: #fde6e3; border-color: #cf4a3c; } .ns-t.bad .ns-v { color: #8c1d12; }
.ns-t.warn { background: #fff0cc; border-color: #d29a1a; } .ns-t.warn .ns-v { color: #6b4300; font-size: 16px; }
.ns-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.ns-b { padding: 12px 14px; border-radius: 12px; border-left: 6px solid var(--accent); background: var(--surface); line-height: 1.65; font-size: 15px; }
.ns-b p { margin: 0 0 4px; text-align: left; }
.ns-bh { margin: 0 0 6px; font-weight: 800; font-size: 15.5px; }
.ns-b.s { border-left-color: #3f9d5b; } .ns-b.w { border-left-color: #cf4a3c; } .ns-b.a { border-left-color: #2f6fdd; }
.ns-tr { color: var(--muted); font-size: 14px; }
.ns-lucky { font-size: 14px; color: var(--muted); }
.ns-flow { padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px dashed var(--line); margin-bottom: 10px; }
.ns-flow .ns-bh { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ns-fl { margin: 4px 0 0; font-size: 15px; }
.ns-fl .up { color: #b42318; } .ns-fl .dn { color: #1f4fb3; }
.ns-more { margin: 4px 0 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; }
.ns-more > summary { cursor: pointer; font-weight: 700; }
@media (max-width: 620px) {
  .ns-hero { flex-direction: column; align-items: stretch; text-align: left; }
  .ns-day { flex-direction: row; justify-content: flex-start; gap: 10px; }
  .ns-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ns-three { grid-template-columns: 1fr; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ns-t.good { background: #12301d; border-color: #5fc17d; } :root:not([data-theme="light"]) .ns-t.good .ns-v { color: #aef0c1; }
  :root:not([data-theme="light"]) .ns-t.bad { background: #3a1613; border-color: #ff7b80; } :root:not([data-theme="light"]) .ns-t.bad .ns-v { color: #ffc9c4; }
  :root:not([data-theme="light"]) .ns-t.warn { background: #3a2c0b; border-color: #e0b040; } :root:not([data-theme="light"]) .ns-t.warn .ns-v { color: #ffe9a8; }
  :root:not([data-theme="light"]) .ns-fl .up { color: #ff9a8f; } :root:not([data-theme="light"]) .ns-fl .dn { color: #8fb4ff; }
}
:root[data-theme="dark"] .ns-t.good { background: #12301d; border-color: #5fc17d; } :root[data-theme="dark"] .ns-t.good .ns-v { color: #aef0c1; }
:root[data-theme="dark"] .ns-t.bad { background: #3a1613; border-color: #ff7b80; } :root[data-theme="dark"] .ns-t.bad .ns-v { color: #ffc9c4; }
:root[data-theme="dark"] .ns-t.warn { background: #3a2c0b; border-color: #e0b040; } :root[data-theme="dark"] .ns-t.warn .ns-v { color: #ffe9a8; }
:root[data-theme="dark"] .ns-fl .up { color: #ff9a8f; } :root[data-theme="dark"] .ns-fl .dn { color: #8fb4ff; }

/* 브랜드 이름 「운명 치유 연구소」(8글자) — 한 줄로, 좁은 화면에서는 글자를 줄인다 */
.brand-text strong { white-space: nowrap; font-size: 36px; }
.brand-text { min-width: 0; }
@media (max-width: 620px) { .brand-text strong { font-size: 25px; letter-spacing: 0; } .brand { gap: 8px; min-width: 0; } .join-link { padding: 6px 10px; font-size: 13px; } }
@media (max-width: 400px) { .brand-text strong { font-size: 22px; } }
@media (max-width: 620px) { .brand-text strong { white-space: normal; font-size: 27px; line-height: 1.02; max-width: 7.2em; } }
@media (max-width: 400px) { .brand-text strong { font-size: 25px; } }

/* 명식표 · 대운 · 세운 · 월운 칸의 간지 타일: 한자 아래에 한글 음 */
.ms-t.rd { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; line-height: 1; }
.ms-t.rd i { font: 700 .34em/1 var(--sans); font-style: normal; letter-spacing: -.02em; }
.ms-cell .ms-t.rd i { font-size: .36em; }
@media (max-width: 520px) { .ms-cell .ms-t.rd i { font-size: .4em; } }

/* 일진 · 월운 종합 감정(원국과 함께): 12운성 · 신살 · 귀인 · 공망 · 천간 합충 · 원진 */
.lf-box .lf-verdict { margin: 8px 0 10px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--brand, #6b4bb3) 9%, transparent); border-left: 4px solid var(--brand, #6b4bb3); line-height: 1.7; }
.lf-box .lf-h { margin: 12px 0 4px; font-size: 14px; }
.lf-chips { margin: 4px 0 2px; }
.lf-chips .chip.lf-good { background: #fbe3df; color: #8c1d12; border-color: #e7a79c; }
.lf-chips .chip.lf-bad { background: #dfe7f7; color: #1f3f86; border-color: #9fb4de; }
.lf-chips .chip.lf-mix { background: #f3ecd9; color: #5b4a20; border-color: #d8c79a; }
.lf-box .tag.mix { background: #efe6cc; color: #5b4a20; }
:root[data-theme="dark"] .lf-box .tag.mix { background: #3a3220; color: #f0e2b8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lf-chips .chip.lf-good { background: #4a1f1a; color: #ffd0c8; border-color: #8c3a2e; }
  :root:not([data-theme="light"]) .lf-chips .chip.lf-bad { background: #1c2a4a; color: #cbdaff; border-color: #3d5590; }
  :root:not([data-theme="light"]) .lf-chips .chip.lf-mix { background: #3a3220; color: #f0e2b8; border-color: #6e5f36; }
}
:root[data-theme="dark"] .lf-chips .chip.lf-good { background: #4a1f1a; color: #ffd0c8; border-color: #8c3a2e; }
:root[data-theme="dark"] .lf-chips .chip.lf-bad { background: #1c2a4a; color: #cbdaff; border-color: #3d5590; }
:root[data-theme="dark"] .lf-chips .chip.lf-mix { background: #3a3220; color: #f0e2b8; border-color: #6e5f36; }