/* 환생록 「생의 흐름」(2026-10-10) — saju/flow-view-v1.mjs의 화면. 먹 산수 두루마리, 근묘화실 띠, 네 가닥 실.
   움직임은 늘 전부 재생(동작 줄이기 분기 없음). */
.lf{--lf-ease:cubic-bezier(.22,.9,.28,1);--lf-ink:#1f2621;--lf-red:var(--red,#974d3a);--lf-soft:var(--paper-label2,#7a7d6e);--lf-brush:'Hanja Brush','Song Myung',var(--serif,serif)}
.lf .lf-lead{max-width:62ch}

/* ── 근묘화실 띠 ── */
.lf-bands{list-style:none;margin:30px 0 8px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:relative;counter-reset:none}
.lf-bands::before{content:'';position:absolute;left:2%;right:2%;top:58px;height:7px;border-radius:4px;
 background:linear-gradient(90deg,#3a3326 0%,#4f6a49 34%,#b8604a 66%,#a47c22 100%);opacity:.22;filter:blur(.4px)}
.lf-band{position:relative;padding:0 14px 6px;border-left:1px solid var(--line);opacity:0;translate:0 22px;filter:blur(3px);
 transition:opacity .8s var(--lf-ease) calc(var(--d)*.14s),translate .8s var(--lf-ease) calc(var(--d)*.14s),filter .8s var(--lf-ease) calc(var(--d)*.14s)}
.lf-band:first-child{border-left:0;padding-left:4px}
.lf.chapter-in .lf-band{opacity:1;translate:0 0;filter:blur(0)}
.lf-band-head{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:end;height:48px}
.lf-band-head b{grid-row:1/3;font:400 40px/1 var(--lf-brush);color:var(--lf-ink)}
.lf-band--flower .lf-band-head b{color:var(--lf-red)}
.lf-band-head span{font:600 16px/1.2 var(--serif);color:var(--ink)}
.lf-band-head small{font-size:11px;color:var(--lf-soft);letter-spacing:.02em;white-space:nowrap}
.lf-band-pillar{margin:22px 0 4px;display:flex;align-items:baseline;gap:8px}
/* 띠 머리 나이·기둥: PC는 한 줄, 휴대폰은 두 줄 */
.lf-band-head .lf-dot{font-style:normal}.lf-band-head .lf-br{display:none}
.lf-glyph{font:400 34px/1 var(--lf-brush);letter-spacing:.06em;color:var(--lf-ink)}
.lf-band--flower .lf-glyph{color:var(--lf-red)}
.lf-band-pillar small{font-size:12px;color:var(--lf-soft)}
.lf-glyph.is-blank{display:inline-block;width:2.2em;height:1em;border:1px dashed var(--outline,#adb09c);border-radius:3px}
.reading-body .lf .lf-band-gloss{margin:6px 0 0;font-size:12.5px;line-height:1.6;color:var(--lf-soft)}
.reading-body .lf .lf-band-line{margin:8px 0 0;font-size:13.5px;line-height:1.75;color:var(--ink);word-break:keep-all}
.lf-band.is-empty .lf-band-line{color:var(--lf-soft);font-style:italic}

/* ── 두루마리 ── */
.lf-scroll{margin:34px 0 0;padding:0}
.lf-scroll figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:0 0 10px}
.lf-scroll figcaption span{font:600 17px/1.4 var(--serif);color:var(--ink)}
.lf-scroll figcaption small{font-size:12px;line-height:1.7;color:var(--lf-soft)}
.lf-legend{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12.5px;color:var(--ink)}
.lf-legend li{display:flex;align-items:center;gap:6px}
.lf-legend i{display:inline-block;width:30px;height:6px;border-radius:6px 2px 6px 2px;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 30%,transparent),var(--c) 70%);clip-path:polygon(0 60%,30% 25%,100% 0,100% 100%,30% 75%,0 40%)}
.lf-legend b{font:400 16px/1 var(--lf-brush);color:var(--c)}
.lf-legend small{font-size:10.5px;color:var(--lf-soft)}
.lf-legend .lf-legend-tide{color:var(--lf-soft);font-size:11.5px}
.lf-viewport{position:relative;margin:0;padding:6px 0 4px;background:radial-gradient(ellipse 70% 60% at 50% 45%,#fffaf00f,transparent 70%)}
.lf-rod{display:none}
.lf-ridge{display:block;overflow:visible;width:100%;height:auto}
.lf-ridge--hm{display:none}

/* 먹 산수 그림(m_i1 b4): 봉우리마다 먹이 번지며 떠오른다 */
.lf-art,.lf-far-art,.lf-mist-art{transform-box:fill-box;transform-origin:50% 100%}
.lf-art{opacity:0;translate:0 14px;filter:blur(5px);transition:opacity 1.1s var(--lf-ease) calc(.3s + var(--d)*.16s),translate 1.1s var(--lf-ease) calc(.3s + var(--d)*.16s),filter 1.1s var(--lf-ease) calc(.3s + var(--d)*.16s)}
.lf-drawn .lf-art{opacity:.96;translate:0 0;filter:blur(0)}
.lf-far-art{opacity:0;transition:opacity 1.8s ease .1s}
.lf-drawn .lf-far-art{opacity:.55}
.lf-mist-art{opacity:0;transition:opacity 1.6s ease 1.4s}
.lf-drawn .lf-mist-art{opacity:.9}
.lf-hill.is-on .lf-art{opacity:1}
.lf-thread{mix-blend-mode:multiply}

/* 봉우리 이름·나이 */
.lf-gz{font:400 25px/1 var(--lf-brush);fill:var(--lf-ink);text-anchor:middle;letter-spacing:.05em;transition:fill .25s}
.lf-ridge--hm .lf-gz{font-size:31px;letter-spacing:0}
.lf-ridge--hm .lf-age{font-size:24px}
.lf-ridge--hm .lf-ageband text{font-size:26px;letter-spacing:.04em}
.lf-ridge--hm .lf-ageband path{stroke-width:5}
.lf-age{font:500 12.5px/1 var(--sans);fill:var(--lf-soft);text-anchor:middle}
.lf-hit{fill:transparent;transition:fill .3s}
.lf-peak{cursor:pointer;outline:none}
.lf-peak:hover .lf-hit{fill:#8a744a0d}
.lf-peak.is-on .lf-hit{fill:#974d3a0b}

.lf-peak.is-on .lf-gz{fill:var(--lf-red)}
.lf-peak.is-on .lf-age{fill:var(--lf-red);font-weight:700}
.lf-peak:focus-visible .lf-hit{stroke:var(--gold);stroke-width:2;stroke-dasharray:4 4}
.lf-ageband path{stroke:var(--lf-ink);stroke-width:3;stroke-linecap:round;opacity:.2}
.lf-ageband--flower path{stroke:var(--lf-red);opacity:.35}
.lf-ageband text{font:400 13px/1 var(--lf-brush);fill:#5d5f52;text-anchor:middle;letter-spacing:.1em}

/* 지금 자리 인장 */
.lf-now-line{fill:none;stroke:var(--lf-red);stroke-width:1.2;stroke-dasharray:3 4;opacity:0;transition:opacity .6s ease 3.6s}
.lf-seal{opacity:0;transition:opacity .25s ease 3.4s}
.lf-seal rect{fill:var(--lf-red);filter:drop-shadow(0 1px 0 #5a221522)}
.lf-seal-han{font:400 19px/1 var(--lf-brush);fill:#f6ead2;text-anchor:middle;dominant-baseline:central}
.lf-seal-age{font:700 12px/1 var(--sans);fill:var(--lf-red);dominant-baseline:central}
.lf-drawn .lf-seal{opacity:1;animation:lf-stamp .5s cubic-bezier(.3,1.6,.5,1) 3.4s both}
.lf-drawn .lf-now-line{opacity:.7}
@keyframes lf-stamp{from{scale:1.6;opacity:0}to{scale:1;opacity:1}}
.lf-seal{transform-box:fill-box;transform-origin:center}

/* ── 봉우리 카드 ── */
.lf-cards{margin:16px 0 0}
/* 실 켜고 끄기(여럿 고르기) */
.lf-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
.lf-pick{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:999px;border:1px solid color-mix(in srgb,var(--c) 45%,transparent);background:color-mix(in srgb,var(--c) 12%,transparent);transition:background .3s,opacity .3s,border-color .3s}
.lf-pick[aria-pressed="false"]{background:transparent;border-color:var(--line);opacity:.45}
.lf-pick[aria-pressed="false"] i{filter:grayscale(1)}
.lf-pick:focus-visible,.lf-only:focus-visible{outline:2px solid var(--lf-red);outline-offset:2px}
.lf-tool-r{display:inline-flex;gap:6px}
.lf-spread{all:unset;cursor:pointer;font:500 12.5px/1 var(--sans);padding:7px 12px;border-radius:999px;border:1px solid var(--line);color:var(--lf-soft);transition:background .35s var(--lf-ease),color .35s}
.lf-spread[aria-pressed="true"]{background:var(--lf-ink);color:var(--paper,#eee9dc);border-color:var(--lf-ink)}
.lf-spread:focus-visible{outline:2px solid var(--lf-red);outline-offset:2px}
.lf-threads--all,.lf-threads--lanes{transition:opacity .6s var(--lf-ease)}
.lf-scroll:not(.is-spread) .lf-threads--lanes,.lf-scroll.is-spread .lf-threads--all{opacity:0;pointer-events:none}
.lf-hills,.lf-mist{transition:opacity .6s}
.lf-scroll.is-spread .lf-hills,.lf-scroll.is-spread .lf-mist{opacity:.55}
.lf-lane path{stroke:var(--lf-ink);stroke-width:1;stroke-dasharray:2 5;opacity:.18}
.lf-lane text{font:400 15px/1 var(--lf-brush);text-anchor:middle;dominant-baseline:central;opacity:.85}
.lf-lane{transition:opacity .45s}
.lf-ridge--hm .lf-lane text{font-size:22px}
.lf-scroll.off-total .lf-lane[data-thread="total"],.lf-scroll.off-name .lf-lane[data-thread="name"],.lf-scroll.off-wealth .lf-lane[data-thread="wealth"],.lf-scroll.off-love .lf-lane[data-thread="love"],.lf-scroll.off-body .lf-lane[data-thread="body"]{opacity:0}
.lf-only{all:unset;cursor:pointer;font:500 12.5px/1 var(--sans);padding:7px 12px;border-radius:999px;border:1px solid var(--line);color:var(--lf-soft)}
.reading-body .lf .lf-legend-tide{margin:6px 0 0;font-size:12px;color:var(--lf-soft);max-width:none}
.lf-thread{transition:opacity .45s var(--lf-ease)}
.lf-scroll.off-total .lf-thread[data-thread="total"],.lf-scroll.off-name .lf-thread[data-thread="name"],.lf-scroll.off-wealth .lf-thread[data-thread="wealth"],.lf-scroll.off-love .lf-thread[data-thread="love"],.lf-scroll.off-body .lf-thread[data-thread="body"]{opacity:0!important}
.lf-thread--total{filter:drop-shadow(0 0 1.5px #f4eee0)}
.lf-grid path{stroke:var(--lf-ink);stroke-width:1;stroke-dasharray:2 6;opacity:.14}
/* 짚을 수 있다는 안내: 안내 띠 + 봉우리 손짓(고리가 퍼짐) + 실 이름 차례로 반짝임. 한 번 짚으면 손짓은 거둔다 */
.reading-body .lf .lf-howto{display:flex;align-items:center;gap:10px;margin:10px 0 0;padding:8px 12px;border:1px dashed color-mix(in srgb,var(--lf-red) 45%,transparent);border-radius:10px;font-size:13px;line-height:1.6;color:var(--ink);max-width:none;background:color-mix(in srgb,var(--lf-red) 5%,transparent)}
.lf-howto-mark{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:6px;background:var(--lf-red);color:#f6ead2;font:400 17px/1 var(--lf-brush)}
.lf-howto b{color:var(--lf-red)}
.lf-touched .lf-howto{opacity:.6;transition:opacity .6s}
.lf-tap{opacity:0;pointer-events:none;transition:opacity .5s}
.lf-tap circle{fill:none;stroke:var(--lf-red);stroke-width:2;transform-box:fill-box;transform-origin:center}
.lf-tap text{font:600 12.5px/1 var(--sans);fill:var(--lf-red);text-anchor:middle;paint-order:stroke;stroke:var(--paper,#eee9dc);stroke-width:4px}
.lf-ridge--hm .lf-tap text{font-size:22px}
.lf-toured .lf-tap{opacity:1;transition-delay:.6s}
.lf-toured .lf-tap circle{animation:lf-tap 2.2s var(--lf-ease) .6s infinite}
.lf-toured .lf-tap .lf-tap-2{animation-delay:1.7s}
@keyframes lf-tap{0%{scale:.55;opacity:.9}100%{scale:1.5;opacity:0}}
.lf-touched .lf-tap{opacity:0!important;transition-delay:0s!important}
.lf-toured .lf-pick{animation:lf-pick 1.1s var(--lf-ease) both;animation-delay:calc(.3s + var(--pi,0) * .14s)}
.lf-legend li:nth-child(2) .lf-pick{--pi:1}.lf-legend li:nth-child(3) .lf-pick{--pi:2}.lf-legend li:nth-child(4) .lf-pick{--pi:3}.lf-legend li:nth-child(5) .lf-pick{--pi:4}
@keyframes lf-pick{0%,100%{translate:0 0;box-shadow:0 0 0 0 transparent}40%{translate:0 -3px;box-shadow:0 4px 10px -4px color-mix(in srgb,var(--c) 60%,transparent)}}
/* 한 줄 요약 · 꼭짓점 표식 · 처음 한 번 짚어 주기 */
.reading-body .lf .lf-gist{margin:10px 0 0;font:500 16px/1.75 var(--serif);color:var(--ink);max-width:none;text-wrap:pretty}
.lf-mark circle{fill:var(--c);stroke:var(--paper,#eee9dc);stroke-width:1.6}
.lf-mark text{font:700 11.5px/1 var(--sans);fill:var(--c);text-anchor:middle;paint-order:stroke;stroke:var(--paper,#eee9dc);stroke-width:4px}
.lf-ridge--hm .lf-mark text{font-size:21px}
.lf-mark{opacity:0;transition:opacity .5s var(--lf-ease)}
.lf-drawn .lf-mark{opacity:1;transition-delay:4.4s}
.lf-scroll.off-total .lf-mark[data-thread="total"],.lf-scroll.off-name .lf-mark[data-thread="name"],.lf-scroll.off-wealth .lf-mark[data-thread="wealth"],.lf-scroll.off-love .lf-mark[data-thread="love"],.lf-scroll.off-body .lf-mark[data-thread="body"]{opacity:0!important;transition-delay:0s!important}
.lf-scroll[data-spot="total"] .lf-mark[data-thread="total"] circle,.lf-scroll[data-spot="name"] .lf-mark[data-thread="name"] circle,.lf-scroll[data-spot="wealth"] .lf-mark[data-thread="wealth"] circle,.lf-scroll[data-spot="love"] .lf-mark[data-thread="love"] circle,.lf-scroll[data-spot="body"] .lf-mark[data-thread="body"] circle{animation:lf-mark .9s var(--lf-ease) 2;transform-box:fill-box;transform-origin:center}
@keyframes lf-mark{50%{scale:1.9}}
.reading-body .lf .lf-tour{min-height:1.6em;margin:8px 0 0;font:600 14px/1.6 var(--serif);color:var(--c,var(--lf-red));max-width:none;opacity:0;translate:0 6px;filter:blur(3px);transition:opacity .5s var(--lf-ease),translate .5s var(--lf-ease),filter .5s var(--lf-ease)}
.reading-body .lf .lf-tour.is-on{opacity:1;translate:0 0;filter:blur(0)}
/* 그래프 아래 읽는 법 */
.lf-guide{margin:14px 0 0;padding:14px 16px 6px;border-left:3px solid var(--lf-red);background:color-mix(in srgb,var(--paper,#eee9dc) 80%,#fff)}
.reading-body .lf .lf-guide-head{margin:0 0 8px;font:600 14px/1.6 var(--serif);color:var(--ink)}
.lf-guide dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 22px;margin:0}
.lf-guide dt{font:600 13px/1.6 var(--serif);color:var(--ink)}
.lf-guide dd{margin:2px 0 10px;font-size:13px;line-height:1.8;color:var(--lf-soft)}
.lf-notes{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;padding:0;list-style:none}
.lf-notes li{font:500 12px/1 var(--sans);color:var(--lf-red);border:1px solid color-mix(in srgb,var(--lf-red) 40%,transparent);border-radius:999px;padding:5px 9px}
.lf-card{position:relative;padding:20px 22px 18px;background:color-mix(in srgb,var(--paper,#eee9dc) 70%,#fffaf0);border:1px solid var(--line);border-top:3px solid var(--lf-ink);border-radius:2px 2px 6px 6px;
 box-shadow:0 10px 30px -18px #2a1e0e66}
.lf-card[hidden]{display:none}
.lf-card.is-fresh{animation:lf-card .7s var(--lf-ease) both}
@keyframes lf-card{from{opacity:0;translate:0 18px;filter:blur(3px)}to{opacity:1;translate:0 0;filter:blur(0)}}
.lf-card header{display:flex;align-items:center;gap:16px}
.lf-card-gz{font:400 46px/1 var(--lf-brush);color:var(--lf-red);letter-spacing:.04em;flex-shrink:0}
.reading-body .lf .lf-card h4{margin:0;font:600 17px/1.4 var(--serif);color:var(--ink)}
.reading-body .lf .lf-card-force{margin:4px 0 0;font-size:12.5px;line-height:1.5;color:var(--lf-soft);max-width:none}
.lf-card-force b{color:var(--ink)}
.lf-card-force b[data-force="2"],.lf-card-force b[data-force="1"]{color:#3d6a45}
.lf-card-force b[data-force="-2"],.lf-card-force b[data-force="-1"]{color:var(--lf-red)}
.reading-body .lf .lf-card-line{margin:14px 0 14px;font:500 16px/1.85 var(--serif);color:var(--ink);max-width:none;padding-left:14px;border-left:2px solid var(--gold)}
.lf-tides{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.lf-tides li{display:grid;grid-template-rows:auto auto auto;justify-items:center;gap:6px;padding:10px 4px 8px;border:1px solid var(--line);border-radius:4px;background:#fffaf033}
.lf-tides b{display:flex;align-items:baseline;gap:4px;font:400 20px/1 var(--lf-brush);color:var(--c)}
.lf-tides b span{font:600 12.5px/1 var(--sans);color:var(--ink)}
.lf-tides em{font:600 13px/1 var(--serif);font-style:normal;color:var(--c)}
.lf-tides li[data-level="0"] em{color:var(--lf-soft)}
/* 물결 세 줄: 밀물은 셋 다 짙게, 잔물은 하나·둘, 썰물은 흐린 한 줄 */
.lf-tide{display:grid;gap:3px;width:56px}
.lf-tide s{display:block;height:5px;border-radius:4px;background:var(--c);opacity:.12;
 -webkit-mask:radial-gradient(circle at 50% -60%,transparent 60%,#000 62%) 0 0/12px 100% repeat-x;mask:radial-gradient(circle at 50% -60%,transparent 60%,#000 62%) 0 0/12px 100% repeat-x}
.lf-tide--1 s:nth-child(3),.lf-tide--2 s:nth-child(n+2),.lf-tide--3 s{opacity:.9}
.lf-tide--0 s:nth-child(3){opacity:.3}
.reading-body .lf .lf-year-note{margin:12px 0 0;font-size:12.5px;color:var(--lf-soft)}
.reading-body .lf .lf-note{display:flex;align-items:center;gap:14px;margin:26px 0 6px;padding:16px 18px;border:1px dashed var(--outline,#adb09c);border-radius:4px;font:500 15px/1.7 var(--serif);color:var(--ink)}
.lf-note span{font:400 34px/1 var(--lf-brush);color:var(--lf-soft);opacity:.7}

/* 그린 법 */
.lf-method{margin:26px 0 0;border-top:1px solid var(--line);padding-top:14px}
.lf-method summary{cursor:pointer;font:600 14px/1.8 var(--serif);color:var(--ink)}
.reading-body .lf .lf-method p{font-size:13px;line-height:1.85;color:var(--lf-soft);margin:8px 0;max-width:68ch}
.reading-body .lf .lf-method .lf-caveat{color:var(--ink)}

/* ── 휴대폰: 같은 가로 두루마리, 글자 키운 판(--hm) ── */
@media(max-width:700px){
 .lf-bands{grid-template-columns:1fr;margin-top:22px}
 .lf-bands::before{left:22px;right:auto;top:6px;bottom:6px;width:6px;height:auto;background:linear-gradient(180deg,#3a3326 0%,#4f6a49 34%,#b8604a 66%,#a47c22 100%)}
 .lf-band,.lf-band:first-child{display:grid;grid-template-columns:52px 1fr;column-gap:12px;padding:12px 0 14px;border-left:0;border-top:1px solid var(--line)}
 .lf-band:first-child{border-top:0}
 .lf-band-head{grid-row:1/5;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:auto;gap:4px;text-align:center;position:relative}
 .lf-band-head b{font-size:34px;background:var(--paper,#eee9dc);padding:2px 0}
 .lf-band-head span{font-size:13px}
 .lf-band-head small{font-size:10px;white-space:nowrap;line-height:1.35}
 .lf-band-head .lf-dot{display:none}.lf-band-head .lf-br{display:inline}
 .lf-band-pillar{margin:0}
 .lf-glyph{font-size:28px}
 .lf-viewport{overflow:visible;margin:0;-webkit-mask-image:none;mask-image:none;padding:0}
 .lf-ridge--h{display:none}
 .lf-ridge--hm{display:block}
 .lf-legend{gap:6px 14px}
 .lf-card{padding:16px 14px 14px}
 .lf-card-gz{font-size:38px}
 .lf-tides{grid-template-columns:repeat(2,minmax(0,1fr))}
 .lf-guide dl{grid-template-columns:1fr}
 .reading-body .lf .lf-gist{font-size:15px}
 .lf-guide{padding:12px 12px 4px}
 .reading-body .lf .lf-card-line{font-size:15px}
}

/* ── 모션: 다른 막과 같은 결(떠오름 cubic-bezier(.22,.9,.28,1)·먹 번짐 blur·느린 숨 6.5s) ──
   그려 들어온 뒤에도 두루마리는 멈추지 않는다: 안개가 흐르고, 먼 산이 숨 쉬고, 네 실이 물결치고, 짚은 봉우리가 떠오른다. */
.lf{--lf-ease:cubic-bezier(.22,.9,.28,1)}
.lf-scroll{opacity:0;translate:0 28px;filter:blur(4px);transition:opacity .9s var(--lf-ease),translate .9s var(--lf-ease),filter .9s var(--lf-ease)}
.lf-drawn .lf-scroll{opacity:1;translate:0 0;filter:blur(0)}
.lf-sky,.lf-mist,.lf-threads .lf-thread,.lf-hill{transform-box:fill-box;transform-origin:50% 100%}
.lf-drawn .lf-sky{animation:lf-far 11s ease-in-out 2s infinite alternate}
@keyframes lf-far{from{translate:-6px 0;opacity:.85}to{translate:6px -3px;opacity:1}}
.lf-drawn .lf-mist-art{animation:lf-mist 9s ease-in-out 1.2s infinite alternate}
@keyframes lf-mist{from{translate:-18px 0}to{translate:18px 2px}}
.lf-mist-art--b{animation-direction:alternate-reverse!important}
.lf-drawn .lf-thread{animation:lf-thread 6.5s ease-in-out calc(4.3s + var(--k,0)*.6s) infinite alternate}
.lf-thread:nth-child(2){--k:1}.lf-thread:nth-child(3){--k:2}.lf-thread:nth-child(4){--k:3}
@keyframes lf-thread{from{translate:0 0;opacity:.82}to{translate:0 -4px;opacity:1}}
.lf-hill{transition:translate .7s var(--lf-ease),filter .7s var(--lf-ease)}
.lf-hill.is-on{translate:0 -8px;filter:drop-shadow(0 10px 10px #2a1e0e33)}
.lf-drawn .lf-hill.is-on .lf-art{animation:lf-breath 3.2s ease-in-out .9s infinite alternate}
@keyframes lf-breath{from{translate:0 0}to{translate:0 -4px}}
.lf-gz{transition:fill .25s,translate .7s var(--lf-ease)}
.lf-peak.is-on .lf-gz{translate:0 -3px}
.lf-drawn .lf-seal{animation:lf-stamp .5s cubic-bezier(.3,1.6,.5,1) 3.4s both,lf-seal 6.5s ease-in-out 4s infinite alternate}
@keyframes lf-seal{from{translate:0 0}to{translate:0 -4px}}

/* ── 붓 긋기(2026-10-11, flow-view-v1.mjs strokeTotal) ──
   .lf-ink-ready: 화면에서 붓 연출을 준비했을 때만 붙는다(자바스크립트 없는 화면은 다 그려진 그림 그대로).
   차례: 붓이 다가오면 봉우리가 일어나고(.is-risen) → 지나면 먹점·간지(.is-inked) → 올해 등불(.is-lit) → 붓을 떼면 인장·표식(.lf-inked) */
.lf-ink-ready .lf-hill:not(.is-risen) .lf-art{opacity:0;translate:0 18px;filter:blur(6px)}
.lf-ink-ready .lf-art{transition-delay:0s;transition-duration:1.25s}
.lf-ink-ready .lf-peak:not(.is-inked) .lf-gz{opacity:0;filter:blur(5px);translate:0 8px}
.lf-ink-ready .lf-peak:not(.is-inked) .lf-age{opacity:0;translate:0 5px}
.lf-ink-ready .lf-gz{transition:fill .25s,opacity .9s var(--lf-ease),filter .9s var(--lf-ease),translate .9s var(--lf-ease)}
.lf-ink-ready .lf-age{transition:fill .25s,opacity .7s var(--lf-ease) .18s,translate .7s var(--lf-ease) .18s}
.lf-ink-ready .lf-gz,.lf-ink-ready .lf-age{transform-box:fill-box;transform-origin:50% 60%}
.lf-ink-ready .lf-peak.is-inked .lf-gz{animation:lf-write .9s var(--lf-ease) both}
@keyframes lf-write{0%{opacity:0;filter:blur(5px);scale:1.18}45%{opacity:1;filter:blur(1.2px)}100%{opacity:1;filter:blur(0);scale:1}}
.lf-ink-ready .lf-ageband{opacity:0;transition:opacity 1s var(--lf-ease) .25s}
.lf-ink-ready.lf-inked .lf-ageband{opacity:1}
.lf-ink-ready .lf-seal{opacity:0;transition:none;animation:none}
.lf-ink-ready .lf-now-line{opacity:0;transition:opacity .6s ease .45s}
.lf-ink-ready.lf-inked .lf-seal{opacity:1;animation:lf-stamp .55s cubic-bezier(.3,1.6,.5,1) .28s both,lf-seal 6.5s ease-in-out 1.2s infinite alternate}
.lf-ink-ready.lf-inked .lf-now-line{opacity:.7}
.lf-ink-ready .lf-mark{transition-delay:0s}
.lf-drawn .lf-ink-ready:not(.lf-inked) .lf-mark,.lf-ink-ready:not(.lf-inked) .lf-mark{opacity:0}
.lf-ink-ready.lf-inked .lf-mark{transition:opacity .7s var(--lf-ease) .9s}

/* 먹 스밈·젖은 먹 */
.lf-seep{mix-blend-mode:multiply;pointer-events:none}
.lf-wet{fill:#1a1320;opacity:.62;mix-blend-mode:multiply;pointer-events:none}
.lf-blot{fill:#1c1720;pointer-events:none}
/* 붓 */
.lf-brush{pointer-events:none}
.lf-brush-core{fill:#0e0b10}
.lf-brush-tuft[style]{fill:var(--tc)}
.lf-brush-body{filter:drop-shadow(3px 5px 3px #2a1e0e40)}
.lf-brush-knot{fill:none;stroke:#7a5628;stroke-width:1.1;opacity:.75}
.lf-brush-cord{fill:none;stroke:#a33a2a;stroke-width:1.3;stroke-linecap:round}
.lf-brush-ferrule{fill:#8a2f22;stroke:#c9a24e;stroke-width:.8}
.lf-brush-head[style]{fill:color-mix(in srgb,var(--tc) 85%,#120e14)}
/* 대운 마디 먹점: 찍히면 고리 두 겹이 번지고, 아래 간지까지 실 한 올이 내렸다 사라진다 */
.lf-node{opacity:0;pointer-events:none}
.lf-node.is-stamped{opacity:1}
.lf-node-dot{fill:#241c2a;stroke:var(--paper,#eee9dc);stroke-width:1.2;transform-box:fill-box;transform-origin:center;scale:0}
.lf-node.is-stamped .lf-node-dot{animation:lf-node .5s cubic-bezier(.3,1.7,.5,1) both}
@keyframes lf-node{0%{scale:0}55%{scale:1.7}100%{scale:1}}
.lf-node-ring{fill:none;stroke:#2a2130;stroke-width:1.4;opacity:0;transform-box:fill-box;transform-origin:center}
.lf-node.is-stamped .lf-node-ring{animation:lf-ring 1.1s cubic-bezier(.2,.7,.3,1) both}
.lf-node.is-stamped .lf-node-ring--b{animation-delay:.16s}
@keyframes lf-ring{0%{scale:.4;opacity:.75;stroke-width:2.4}100%{scale:3.4;opacity:0;stroke-width:.4}}
.lf-node-drop{fill:none;stroke:#2a2130;stroke-width:1;stroke-dasharray:1 1;stroke-dashoffset:1;opacity:0}
.lf-node.is-stamped .lf-node-drop{animation:lf-drop-line 1.5s var(--lf-ease) both}
@keyframes lf-drop-line{0%{stroke-dashoffset:1;opacity:.55}45%{stroke-dashoffset:0;opacity:.45}100%{stroke-dashoffset:0;opacity:0}}
.lf-ridge--hm .lf-node-drop{stroke-width:1.8}
/* 먹방울 */
.lf-drop{fill:#1c1720;opacity:0;transform-box:fill-box;transform-origin:center;animation:lf-splat .6s cubic-bezier(.3,1.5,.5,1) var(--dd,0ms) both}
@keyframes lf-splat{0%{opacity:0;scale:0}40%{opacity:.85;scale:1.35}100%{opacity:.28;scale:.85}}
/* 올해 등불 */
.lf-lamp{pointer-events:none}
.lf-lamp-glow{opacity:0}
.lf-lamp-glow>circle:first-child{transform-box:fill-box;transform-origin:center;scale:.15}
.lf-lamp-beam{opacity:0;transform-box:fill-box;transform-origin:50% 50%;scale:1 .2}
.lf-lamp-core{fill:#fff6da;stroke:#e0a243;stroke-width:1}
.lf-lamp.is-lit .lf-lamp-glow{opacity:1;transition:opacity .4s ease}
.lf-lamp.is-lit .lf-lamp-glow>circle:first-child{animation:lf-lamp 1.6s cubic-bezier(.2,.8,.3,1) both,lf-lamp-b 3.6s ease-in-out 1.6s infinite alternate}
.lf-lamp.is-lit .lf-lamp-beam{animation:lf-beam 1.4s cubic-bezier(.2,.8,.3,1) .1s both}
@keyframes lf-lamp{0%{scale:.15;opacity:0}30%{scale:1.35;opacity:1}100%{scale:1;opacity:.85}}
@keyframes lf-lamp-b{from{scale:1;opacity:.85}to{scale:1.14;opacity:.6}}
@keyframes lf-beam{0%{opacity:0;scale:1 .2}40%{opacity:1;scale:1 1}100%{opacity:.55;scale:1 1}}
/* 실을 끄거나 펼쳐 보면 종합 실에 딸린 것도 함께 */
.lf-scroll.off-total .lf-seep,.lf-scroll.off-total .lf-wet,.lf-scroll.off-total .lf-nodes,.lf-scroll.off-total .lf-drops{opacity:0;transition:opacity .45s}
.lf-drawn .lf-nodes,.lf-drawn .lf-drops{animation:lf-thread 6.5s ease-in-out 4.3s infinite alternate}
.lf-scroll.is-spread .lf-lamp-glow,.lf-scroll.off-total .lf-lamp-glow{opacity:0!important;transition:opacity .45s}

/* 마감 검사(2026-10-12): 휴대폰에서 실 단추·켜기·펼치기를 손가락으로 누르기 좋게, 작은 글자는 11px 이상, 붉은 표시 글자는 대비 4.5 이상 */
.lf-band-head small{font-size:11.5px}
@media (max-width:700px){ .lf-pick,.lf-only,.lf-spread{min-height:44px;box-sizing:border-box;padding-block:0} }
.lf-notes li,.lf-card-force b{color:#7f3b2b}
.lf-band-head small,.lf-band-pillar small{font-size:12px}
.lf-tides em{color:color-mix(in srgb,var(--c) 68%,#000)}
.lf{--lf-soft:#5c6052}
@media (max-width:700px){ .lf summary{min-height:44px;display:flex;align-items:center} }

/* 점방 안에서도 「짚는 법」 표지가 글과 한 줄에(2026-10-12 전수검사) */
.lf .lf-howto{display:flex;align-items:flex-start;gap:10px}
.lf .lf-howto>span:last-child{min-width:0}

/* 실 색이름(먹빛·주홍빛…) 글자 하한 */
.lf .lf-pick small{font-size:11.5px}
/* 점방 안에서도 대운 없음 안내의 한자와 글이 붙지 않게 */
.lf .lf-note{display:flex;align-items:center;gap:12px}
.lf .lf-note>span:first-child{flex:none;font:400 26px/1 var(--lf-brush,serif);color:var(--lf-red)}