/* 오늘의 카드 뒷면 (11-15 사용자 시안 design/ref/major-symbols/back-mockup.webp).
   짙은 남색 질감 바탕, 얇은 금테 두 줄과 네 귀퉁이 별 장식. 위에서부터 오늘의 카드, 번호, 이름, 영문, 상징, 오늘의 메시지, 해설, 정방향과 역방향, 그림으로 돌아가기.
   글 크기는 카드 폭(--cw)에 맞추되 짧은 화면에서 작은 카드가 되어도 읽히게 최소 크기를 둔다. 앞선 style.css, style-v2.css 의 .zf-back 규칙을 덮는다 */
/* 카드 폭(style.css .zflip 의 width 와 같은 식). 컨테이너 단위(cqw) 대신 이 값을 곱해 iOS 15 에서도 같게 보인다(11-15 검수) */
.zflip {--cw:min(78vw,calc(66vh*.6),400px)}
.zf-back {justify-content:flex-start;padding:calc(var(--cw)*0.09) calc(var(--cw)*0.08) calc(var(--cw)*0.06);border-radius:calc(var(--cw)*0.035);gap:0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .75 0 0 0 0 .8 0 0 0 0 .95 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(120% 80% at 50% 30%,#14213a 0%,#0c1528 55%,#080f1f 100%);
  box-shadow:inset 0 0 0 1px #c9ae7acc,10px 18px 30px #000a}
.zf-back::before {content:'';position:absolute;inset:calc(var(--cw)*0.024);border:1px solid #c9ae7a80;border-radius:calc(var(--cw)*0.022);pointer-events:none}
.zf-back .zb-corner {position:absolute;width:calc(var(--cw)*0.13);height:calc(var(--cw)*0.13);margin:0;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52' fill='none' stroke='%23d9bd84' stroke-width='.9'%3E%3Cpath d='M14 4 C 30 4 40 6 50 3' /%3E%3Cpath d='M4 14 C 4 30 6 40 3 50' /%3E%3Cpath d='M14 8 C 22 8 26 10 30 13' stroke-width='.6'/%3E%3Cpath d='M8 14 C 8 22 10 26 13 30' stroke-width='.6'/%3E%3Cpath d='M11 3 L12.4 9.6 L19 11 L12.4 12.4 L11 19 L9.6 12.4 L3 11 L9.6 9.6 Z' fill='%23e7cf98' stroke='none'/%3E%3C/svg%3E") center/contain no-repeat}
.zf-back .zb-corner.tl {left:calc(var(--cw)*0.012);top:calc(var(--cw)*0.012)}
.zf-back .zb-corner.tr {right:calc(var(--cw)*0.012);top:calc(var(--cw)*0.012);transform:scaleX(-1)}
.zf-back .zb-corner.bl {left:calc(var(--cw)*0.012);bottom:calc(var(--cw)*0.012);transform:scaleY(-1)}
.zf-back .zb-corner.br {right:calc(var(--cw)*0.012);bottom:calc(var(--cw)*0.012);transform:scale(-1)}
.zf-back .zb-kicker {font:400 max(11px,calc(var(--cw)*0.039))/1.3 var(--display);letter-spacing:.04em;color:#cdb689}
.zf-back .zb-num {margin-top:calc(var(--cw)*0.012);font:400 max(10px,calc(var(--cw)*0.037))/1 var(--latin);letter-spacing:.18em;padding-left:.18em;color:#d9bd84}
.zf-back b.zb-name {margin-top:calc(var(--cw)*0.026);font:600 calc(var(--fit,1)*calc(var(--cw)*0.115))/1.15 var(--display);letter-spacing:.02em;color:#f2ead9}
.zf-back .zb-en {margin-top:calc(var(--cw)*0.016);font:400 max(10px,calc(var(--cw)*0.035))/1.2 var(--latin);letter-spacing:.24em;padding-left:.24em;text-transform:uppercase;color:#d9bd84}
/* 가운데 작은 별을 낀 금색 가는 줄 */
.zf-back .zb-star {position:relative;flex:none;width:100%;height:calc(var(--cw)*0.026);margin-top:calc(var(--cw)*0.036);
  background:linear-gradient(90deg,transparent 12%,#c9ae7a99 30%,#c9ae7a99 45%,transparent 45%,transparent 55%,#c9ae7a99 55%,#c9ae7a99 70%,transparent 88%) center/100% 1px no-repeat}
.zf-back .zb-star::after {content:'';position:absolute;left:50%;top:50%;width:calc(var(--cw)*0.026);height:calc(var(--cw)*0.026);transform:translate(-50%,-50%);
  background:#e7cf98;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.zf-back .zb-sym {display:block;flex:1 1 0;min-height:calc(var(--fit,1)*calc(var(--cw)*0.24));max-height:calc(var(--cw)*0.4);width:100%;max-width:calc(var(--cw)*0.78);object-fit:contain;margin-top:calc(var(--cw)*0.024);filter:drop-shadow(0 0 calc(var(--cw)*0.016) #e7cf9814)}
/* 상징은 남는 높이를 채운다(24~calc(var(--cw)*0.4), 메시지가 짧으면 커진다). 카드 가운데가 비지 않게 */
/* 오늘의 메시지: 양쪽에 가는 줄 */
.zf-back .zb-label {display:flex;align-items:center;gap:calc(var(--cw)*0.03);width:100%;margin-top:calc(var(--cw)*0.034);font:400 max(11px,calc(var(--cw)*0.039))/1.3 var(--display);color:#d9bd84;white-space:nowrap}
.zf-back .zb-label::before,.zf-back .zb-label::after {content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,#c9ae7a80)}
.zf-back .zb-label::after {background:linear-gradient(90deg,#c9ae7a80,transparent)}
.zf-back p.zb-msg {display:block;flex:none;margin-top:calc(var(--cw)*0.026);font:500 calc(var(--fit,1)*max(14px,calc(var(--cw)*0.056)))/1.45 var(--display);letter-spacing:-.01em;color:#f2ead9;word-break:keep-all;overflow-wrap:break-word}
.zf-back p.zb-note {display:block;flex:none;margin-top:calc(var(--cw)*0.026);font:400 calc(var(--fit,1)*max(11px,calc(var(--cw)*0.039)))/1.7 var(--serif);color:#c9cfd9;text-align:left;word-break:keep-all;overflow-wrap:break-word;align-self:stretch}
.zf-back .zb-star + dl,.zf-back dl {border-top:0;padding-top:0}
.zf-back dl {width:100%;margin:calc(var(--cw)*0.026) 0 0;display:grid;grid-template-columns:auto 1fr;gap:calc(var(--cw)*0.016) 0;font:400 calc(var(--fit,1)*max(11px,calc(var(--cw)*0.037)))/1.5 var(--display);text-align:left}
.zf-back dt {padding-right:calc(var(--cw)*0.03);color:#d9bd84;white-space:nowrap}
.zf-back dt:nth-of-type(2) {color:#a8b2c2}
.zf-back dd {margin:0;padding-left:calc(var(--cw)*0.03);border-left:1px solid #c9ae7a66;color:#e3ddd0;word-break:keep-all}
.zf-back .zb-back {margin-top:auto;padding:calc(var(--cw)*0.03) calc(var(--cw)*0.02) 0;border:0;background:none;cursor:pointer;font:400 max(12px,calc(var(--cw)*0.039))/1.3 var(--display);color:#d9bd84;display:inline-flex;align-items:center;gap:calc(var(--cw)*0.016)}
.zf-back .zb-back::after {content:'↻';font-size:1.1em;line-height:1}
.zf-back .zb-back:focus-visible {outline:1px solid #e7cf98;outline-offset:-1px;border-radius:4px}
.zf-back .zb-foot {display:none}
#zoom .zhint {font:400 12px/1.6 var(--display);color:#8e9bad}
/* 상징이 없는 카드(마이너)는 남는 높이를 메시지 위아래로 나눠 가운데가 비지 않게 */
.zf-back:not(:has(.zb-sym)) .zb-label {margin-top:auto}
/* 아주 짧은 화면(320x568 등)은 카드가 작아 최소 글 크기로도 넘친다 */
@media (max-height:600px) {
  .zf-back {padding-top:calc(var(--cw)*0.07)}
  .zf-back p.zb-msg {font-size:calc(var(--fit,1)*max(13px,calc(var(--cw)*0.056)))} .zf-back p.zb-note,.zf-back dl {font-size:calc(var(--fit,1)*max(10px,calc(var(--cw)*0.037)))}
  .zf-back .zb-sym {min-height:calc(var(--fit,1)*calc(var(--cw)*0.2))}
}
/* 글을 0.7 배까지 줄여도 넘치면(아주 긴 한마디) 뒷면 안에서 굴린다 (app.js fitBack) */
.zf-back.scroll {overflow-y:auto;overscroll-behavior:contain}
.zf-back.scroll .zb-back {margin-top:calc(var(--cw)*0.03)}