/* 2026-11-13 신규 캐릭터 연애타로(현야) 화면 부품(line_yy). 색은 갈래 토큰(line-yy.css)만 쓴다. 글자 14px 이상. */

/* ── 카드 앞면(그림 또는 이름 카드) ── */
.yy-tf{position:relative;margin:0;aspect-ratio:2 / 3;border-radius:10px;overflow:hidden;background:var(--yy-panel-3);
  border:1px solid var(--yy-rule);box-shadow:0 6px 18px rgba(0,0,0,.28)}
.yy-tf img{display:block;width:100%;height:100%;object-fit:cover}
.yy-tf.is-rev{transform:rotate(180deg)}
.yy-tf-face{position:absolute;inset:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  border:1px solid var(--yy-rule);border-radius:7px;text-align:center;padding:6px}
.yy-tf-face small{font:600 14px/1.2 var(--line-sans);color:var(--yy-sub)}
.yy-tf-face b{font:var(--line-serif-weight) 16px/1.3 var(--line-serif);color:var(--yy-strong)}

/* ── 고른 세 장 ── */
.yy-tt-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0;padding:0;list-style:none}
.yy-tt-row li{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.yy-tt-row .yy-tf{width:100%;margin-bottom:10px}
.yy-tt-slot{margin:0;font:600 14px/1.4 var(--line-sans);color:var(--yy-sub)}
.yy-tt-name{margin:2px 0 0;font:800 15px/1.35 var(--line-sans);color:var(--yy-strong)}
.yy-tt-orient{margin:2px 0 0;font:500 14px/1.35 var(--line-sans);color:var(--reading-accent)}

/* ── 카드 한 장 풀이 ── */
.yy-tc-head{display:flex;gap:16px;align-items:center;margin-bottom:14px}
.yy-tc-head .yy-tf{flex:none;width:84px}
.yy-tc-who{min-width:0}
.yy-tc-slot{margin:0;font:600 14px/1.4 var(--line-sans);color:var(--yy-sub)}
.yy-tc-name{margin:2px 0;font:var(--line-serif-weight) 21px/1.3 var(--line-serif);color:var(--yy-strong)}
.yy-tc-orient{margin:0;font:600 14px/1.4 var(--line-sans);color:var(--reading-accent)}
.yy-tc-intro{margin:0 0 12px;font:400 15px/1.7 var(--line-sans);color:var(--yy-text)}
.yy-tc-kw{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;padding:0;list-style:none}
.yy-tc-kw li{padding:6px 12px;border:1px solid var(--yy-rule);border-radius:999px;font:600 14px/1.3 var(--line-sans);color:var(--yy-text)}
.yy-tc-kw li.is-hid{display:flex;align-items:center;width:76px;height:31px;padding:0 12px}
.yy-tc-lead{margin:0 0 10px;font:700 16px/1.65 var(--line-sans);color:var(--yy-strong)}
.yy-tc-detail{margin:0 0 10px;font:400 15px/1.75 var(--line-sans);color:var(--yy-text)}
.yy-tc-bars{display:flex;flex-direction:column;gap:12px;margin:6px 0 14px}
.yy-tc-bars .yy-hidbar{flex:none}
.yy-tc-bars .yy-hidbar:nth-child(2){width:86%}
.yy-tc-bars .yy-hidbar:nth-child(3){width:64%}
.yy-tc-act{margin-top:14px;padding-top:14px;border-top:1px solid var(--yy-rule-soft)}
.yy-tc-act-label{margin:0 0 6px;font:700 14px/1.4 var(--line-sans);color:var(--reading-accent)}
.yy-tc-act-text{margin:0;font:600 15px/1.7 var(--line-sans);color:var(--yy-strong)}
.yy-tc-act-hid{display:flex;align-items:center;gap:10px;color:var(--yy-sub)}
.yy-tc-act-hid .v2-lock-ico{flex:none;width:18px;height:18px}

/* ── 사주 시기 · 할 일 목록 ── */
.yy-tb-line{margin:0 0 10px;font:400 15px/1.75 var(--line-sans);color:var(--yy-text)}
.yy-ta-list{margin:0;padding:0;list-style:none}
.yy-ta-list li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--yy-rule-soft)}
.yy-ta-list li>b{flex:none;font:900 14px/1.6 var(--line-sans);color:var(--reading-accent)}
.yy-ta-list li>div{flex:1;min-width:0}
.yy-ta-list .yy-hidbar{margin-top:8px;width:88%}
.yy-ta-who{margin:0 0 4px;font:600 14px/1.5 var(--line-sans);color:var(--yy-sub)}
.yy-ta-text{margin:0;font:500 15px/1.7 var(--line-sans);color:var(--yy-strong)}
.yy-ta-sum{margin-top:16px}

/* ── 카드 뽑기 화면 ── */
.yy-draw{padding-bottom:120px}
.yy-draw-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 22px 0;padding:0;list-style:none}
.yy-draw-slots li{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font:600 14px/1.35 var(--line-sans);color:var(--yy-sub)}
.yy-draw-place{display:block;width:62px;aspect-ratio:2 / 3;border:1.5px dashed var(--yy-rule);border-radius:8px}
.yy-draw-slots li.is-on .yy-draw-place{border-style:solid;border-color:var(--reading-accent);
  background:var(--yy-panel-3) center / cover no-repeat;background-image:var(--back)}
.yy-draw-slots li.is-on{color:var(--yy-strong)}
/* 78장 = 13장씩 6줄. 한 장 48px 에 26px 간격으로 겹쳐, 누르는 가운데(24px)가 다음 장(26px부터)에 가리지 않는다 */
.yy-draw-deck{display:grid;grid-template-columns:repeat(13,26px);grid-auto-rows:62px;justify-content:center;
  margin:22px 0 0;padding:0 11px 0 0}
.yy-draw-card{width:48px;height:72px;padding:0;border:1px solid var(--yy-rule);border-radius:6px;cursor:pointer;
  background:var(--yy-panel-3) center / cover no-repeat;box-shadow:-2px 2px 6px rgba(0,0,0,.35);transition:transform .18s ease,opacity .18s ease}
.yy-draw-card:focus-visible{outline:2px solid var(--reading-accent);outline-offset:2px}
.yy-draw-card.is-picked{opacity:.18;transform:translateY(-6px);cursor:default}
.yy-draw.is-done .yy-draw-card:not(.is-picked){opacity:.55;cursor:default}

@media (prefers-reduced-motion:reduce){.yy-draw-card{transition:none}}

/* ── 11/13 2차: 섞은 더미 맨 위 12장 부채꼴 한 줄(사장님 「고를 카드가 너무 많다」, views.TAROT_FAN) ──
   한 장 폭 = 화면 폭의 11.8%(최대 52), 회전 중심은 카드 아래 2.4장 높이. 이웃 장 사이가 카드 가운데 높이에서 반 장 넘게 벌어져
   누르는 가운데가 다음 장에 덮이지 않는다(각도 7.8도 × 5.5 = 양 끝 43도) */
html[data-theme] .yy .yy-draw-deck.is-fan{--cw:min(52px,calc(var(--yy-w,100vw) * .118));--ch:calc(var(--cw) * 1.5);--step:7.8deg;position:relative;display:block;
  height:calc(var(--ch) * 1.95 + 24px);margin:18px 0 0;padding:0}
html[data-theme] .yy .yy-draw-deck.is-fan .yy-draw-card{position:absolute;left:calc(50% - var(--cw) / 2);top:16px;width:var(--cw);height:var(--ch);aspect-ratio:auto;
  transform-origin:50% calc(100% + var(--ch) * 2.4);transform:rotate(calc((var(--i) - 5.5) * var(--step)));border-radius:7px;touch-action:manipulation}
html[data-theme] .yy .yy-draw-deck.is-fan .yy-draw-card.is-picked{opacity:.22;transform:rotate(calc((var(--i) - 5.5) * var(--step))) translateY(-12px)}
.yy-draw-deck.is-shake{animation:q-shake .32s ease}
html[data-theme] .yy .yy-draw-need{min-height:20px;margin:6px 22px 0;text-align:center;font:600 14px/1.4 var(--line-sans);color:var(--yy-accent-soft)}
/* 「이대로 보기」는 세 장 전에도 또렷한 단색(누르면 남은 장수를 알려 줌) */
html[data-theme] .yy .yy-draw .yy-sticky .btn{opacity:1}
/* 뽑기 화면도 폰 한 화면(그림 띠 · 자리 세 칸 · 부채꼴 · 버튼). 그림은 화면 높이에서 나머지 몫을 뺀 띠로 */
html[data-theme] .yy .yy-draw .yy-slot[data-slot="P1"]{width:100%;height:clamp(200px,calc(100svh - 432px),520px);aspect-ratio:auto;margin:0}
html[data-theme] .yy .yy-draw .yy-slot[data-slot="P1"] img{border-radius:0}
html[data-theme] .yy .yy-draw .yy-draw-slots{margin-top:6px}
html[data-theme] .yy .yy-draw .yy-draw-place{width:54px}
.yy.is-nc.is-nc.yy-draw{padding-bottom:96px}

/* ── 11/13 2차 공용 부품 끼우기(products/lovetarot.py 칸 2 · 6 · 14) ── */
/* 칸 2 세 장 표를 한지 카드 틀(nc_card_frame)로: 밝은 종이 위 글자색 */
html[data-theme] .yy.is-nc .ncp-frame .yy-tt-slot{color:#6f6266}
html[data-theme] .yy.is-nc .ncp-frame .yy-tt-name{color:#2b2326}
html[data-theme] .yy.is-nc .ncp-frame .yy-tt-orient{color:#8a5a1c}
html[data-theme] .yy.is-nc .ncp-frame .yy-card-title{margin-bottom:16px;text-align:center}
/* 칸 6 마음 온도계: 날짜 막대 줄은 쓰지 않음(날짜 그래프가 아님), 가로 말은 막대 두 개 아래 가운데 */
.ncp-graph.is-memo .ncp-big{display:none}
.ncp-graph.is-memo .ncp-graph-x span{flex:1;text-align:center}
/* 칸 14 사주와 뭐가 달라요: 두 칸 + 더하기 → 한 줄 */
.yy-tdiff{padding:24px 16px 22px;border-radius:16px;background:var(--yy-panel);border:1px solid rgb(var(--yy-accent-rgb) / .2)}
.yy-tdiff .ncp-hand-title{margin-bottom:18px}
.yy-tdiff-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:8px}
.yy-tdiff-col{display:flex;flex-direction:column;align-items:center;text-align:center;padding:16px 10px;border-radius:12px;background:var(--yy-panel-3)}
.yy-tdiff-ic{width:26px;height:26px;color:var(--yy-accent)}
html[data-theme] .yy .yy-tdiff-k{margin:8px 0 0;font:600 14px/1.3 var(--line-sans);color:var(--yy-sub)}
html[data-theme] .yy .yy-tdiff-big{margin:2px 0 8px;font:800 19px/1.3 var(--line-sans);color:var(--yy-strong)}
html[data-theme] .yy .yy-tdiff-s{margin:0;font:400 14px/1.5 var(--line-sans);color:var(--yy-text)}
.yy-tdiff-plus{align-self:center;font:700 22px/1 var(--line-sans);color:var(--yy-accent)}
html[data-theme] .yy .yy-tdiff-sum{margin:18px 0 0;text-align:center;font:700 17px/1.5 var(--line-sans);color:var(--yy-accent-soft)}
/* 칸 5 호기심 카드: 공용 memo 카드(한 장 기준 40%)가 두세 장이면 줄 밖으로 넘쳐서, 여러 장일 땐 세 장이 한 줄에 들게 */
.ncp-cards.is-memo .ncp-card:not(:only-child){flex-basis:min(31%,124px);padding:12px 8px}

/* ── 11/14 고침(4차 분석 yy.md) ── */
/* A15 이름 카드 역방향: 판만 180도(윗줄 무늬 이름이 아래로 감), 글자는 다시 바로. 무늬 이름은 판 위쪽에 붙여 방향이 보이게 */
.yy-tf.is-name .yy-tf-face small{position:absolute;top:8px;left:0;right:0}
.yy-tf.is-name.is-rev .yy-tf-face>*{transform:rotate(180deg)}
/* A2 03 뒤집힌 카드 전용 칸: 바로 놓이면 · 거꾸로 놓여서 막는 것 두 줄 */
.yy-tr-row{display:grid;gap:14px}
.yy-tr-col .yy-tc-act-label{margin-bottom:8px}
.yy-tr-col .yy-tc-kw{margin:0}
.yy-tr-col.is-rev{padding-top:14px;border-top:1px solid var(--yy-rule-soft)}
/* A23 말풍선 끝 글자가 원 테두리에 닿지 않게 안쪽 여백 */
html[data-theme] .yy.is-nc[data-product="lovetarot"] .yy-bubble{padding:16px 22px}
/* A24 카드 설명 · 이름 한 글자 줄넘김 막기 */
.yy.is-nc[data-product="lovetarot"] :is(.ncp-card-desc,.ncp-lines p,.ncp-note-rb,.yy-tt-name,.yy-tc-name){text-wrap:balance}

/* 11/14 타사 항목 더하기 칸(parts/tarot_more.html) */
html[data-theme] .yy .yy-tm-score{display:flex;align-items:baseline;justify-content:center;gap:8px;margin:0 0 10px;color:var(--yy-strong)}
html[data-theme] .yy .yy-tm-score b{font:800 40px/1 var(--line-sans);letter-spacing:-.02em;color:var(--yy-accent)}
html[data-theme] .yy .yy-tm-score span{font:700 17px/1.3 var(--line-sans)}
html[data-theme] .yy .yy-tm-line{display:flex;align-items:center;min-height:24px;margin:8px 0 0;font:400 15px/1.7 var(--line-sans);color:var(--yy-text)}
html[data-theme] .yy .yy-tm-line.is-center{justify-content:center;text-align:center}
html[data-theme] .yy .yy-tm-rows>div.is-wide{grid-column:1 / -1}
html[data-theme] .yy .yy-tm-rows dd{display:flex;align-items:center;min-height:22px}
html[data-theme] .yy .yy-tm-rows .yy-hidbar,html[data-theme] .yy .yy-tm-line .yy-hidbar{max-width:80%}
html[data-theme] .yy .yy-tm-months{display:grid;gap:10px;margin:0;padding:0;list-style:none}
html[data-theme] .yy .yy-tm-months li{padding:12px 14px;border:1px solid var(--yy-rule-soft);border-radius:10px;background:var(--yy-panel-3)}
html[data-theme] .yy .yy-tm-mhead{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0;font:700 15px/1.4 var(--line-sans);color:var(--yy-strong)}
html[data-theme] .yy .yy-tm-tag{padding:1px 10px;border:1px solid var(--yy-rule);border-radius:999px;font:700 14px/1.5 var(--line-sans);color:var(--yy-accent-soft)}
html[data-theme] .yy .yy-tm-months li.is-caution .yy-tm-tag{color:var(--yy-sub);border-color:var(--yy-rule-soft)}
html[data-theme] .yy .yy-tm-pt{margin-left:auto;font:700 15px/1.4 var(--line-sans);color:var(--yy-accent)}

/* ── 11/14 분량 늘리기: 깊이 읽기 장(parts/tarot_deep.html) ── */
.yy-td-item{padding:16px 0 4px;border-top:1px solid var(--yy-rule-soft)}
.yy-td-item:first-of-type{border-top:0;padding-top:4px}
html[data-theme] .yy .yy-td-h{margin:0 0 10px;font:700 16px/1.45 var(--line-sans);color:var(--reading-accent);text-align:left}
.yy-td-p{margin:0 0 12px;font:400 15px/1.8 var(--line-sans);color:var(--yy-text);word-break:keep-all;overflow-wrap:anywhere}
.yy-td-rows{margin:0;padding:0;list-style:none}
.yy-td-rows li{padding:12px 0 2px;border-bottom:1px solid var(--yy-rule-soft)}
.yy-td-rows li:last-child{border-bottom:0}
.yy-td-rh{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 6px}
.yy-td-rh b{font:700 15px/1.4 var(--line-sans);color:var(--yy-strong)}
.yy-td-tag{padding:2px 10px;border:1px solid var(--yy-rule);border-radius:999px;font:600 14px/1.4 var(--line-sans);color:var(--yy-sub)}
.yy-td.is-masked .yy-td-item{padding-bottom:0}
.yy-td.is-masked .yy-tc-bars{margin-top:2px}