/* css/ledger.css | 내 관람(ledger) 화면 전용 모양 (26.10.01 site.css 에서 떼어 냄, tools/css_split.py)
   site.css 뒤에 불러오며 site.css 의 색·글꼴 변수를 그대로 쓴다. 규칙 순서는 원래 순서 그대로 */

.bk-hero .rule{width:70px;height:1px;background:rgba(201,164,90,.6);margin:22px auto}

.sheet .rule{position:relative;width:100%;height:1px;margin:20px 0 18px;}
.sheet .rule{background:linear-gradient(90deg,transparent,rgba(207,198,182,.5),transparent)}
.lg-k{font:600 10.5px var(--num);letter-spacing:.22em;color:var(--mute);margin-bottom:2px}
.lg-k em{font-family:var(--serif-num);font-style:italic;font-size:15px;letter-spacing:0;color:var(--ink2)}
.lg-k2{display:flex;justify-content:space-between;align-items:baseline;margin:22px 0 6px}
.lg-cb li{list-style:none;display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:13.5px}
.lg-cb li:last-child{border-bottom:1px solid var(--line)}
.lg-cb b{font-family:var(--num);font-weight:600}
.lg-cb .lg-empty span{color:var(--mute);font-size:12.5px}
.lg-more, .lg-reset{margin-top:10px;font-size:12.5px;color:var(--mute);text-decoration:underline;text-underline-offset:3px}

.lg-act button{width:100%;height:46px;background:var(--ink);color:var(--paper);font-size:14px;font-weight:700}
.lg-act button[disabled],.lg-act button.off{opacity:.35}
.lg-cs{font-size:13px;color:var(--mute);margin:4px 0 10px}
.lg-card{border-top:1px solid var(--line);padding:14px 0}
.lg-card:last-of-type{border-bottom:1px solid var(--line)}
.lg-ch{display:flex;justify-content:space-between;font-size:14px;font-weight:700}
.lg-ch span{font:600 13px var(--num);color:var(--mute)}
.lg-dots{display:flex;}


.lg-card p{font-size:12.5px;color:var(--ink2);line-height:1.75}
.lg-card p b{font-weight:600}
.lg-card p s{text-decoration:none;color:var(--soft)}
.lg-g7{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:12.5px;color:var(--ink2)}
.lg-g7 select{height:32px;border:1px solid var(--line-s);background:transparent;padding:0 8px;font-size:12.5px;color:var(--ink)}
.lg-mo .lg-runs{margin-bottom:12px}
.lg-mo .lg-runs li:last-child{border-bottom:0}
.lg-runs li{list-style:none;border-top:1px solid var(--line)}
.lg-runs li:last-child{border-bottom:1px solid var(--line)}
.lg-runs label{display:grid;grid-template-columns:22px 86px 1fr;gap:8px;align-items:center;padding:9px 0;font-size:13px;cursor:pointer}
.lg-runs input{width:16px;height:16px;accent-color:var(--ink)}
.lg-runs .d{font-family:var(--num);font-weight:600}
.lg-runs .d small{font-weight:400;color:var(--mute);margin-left:4px}
.lg-runs .c{color:var(--ink2)}
.lg-runs .c i{font-style:normal;color:var(--soft)}
.lg-back{font-size:12.5px;color:var(--mute);margin:0 0 12px;padding:0}
.lg-back::before{content:'‹';margin-right:6px;font-size:15px}
.lg-mast{border-top:4px double var(--ink);padding-top:10px;text-align:center}
.lg-title{font:600 24px/1.15 var(--serif-num);letter-spacing:.13em;margin:0;padding-bottom:8px;border-bottom:1.5px solid var(--ink);color:var(--ink)}
.lg-meta{display:flex;justify-content:space-between;gap:10px;font:600 9.5px var(--num);letter-spacing:.2em;color:var(--mute);padding:8px 0;border-bottom:1px solid var(--line)}
.lg-hl{font:italic 500 38px/1.1 var(--serif-num);text-align:center;margin:18px 0 16px;color:var(--ink)}
.lg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 6px}
.lg-grid figure{margin:0}
.lg-grid img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;background:var(--band)}
.lg-grid figcaption{display:flex;justify-content:space-between;align-items:baseline;padding:5px 1px 0;font-size:12px;color:var(--ink2)}
.lg-grid figcaption b{font:600 13px var(--num);color:var(--ink)}
.lg-grid figure.z figcaption b{color:var(--soft)}
.lg-total{display:flex;justify-content:flex-end;align-items:baseline;gap:8px;margin:22px 0 0;border-top:1.5px solid var(--ink);padding-top:4px}
.lg-total b{font:italic 500 88px/1 var(--serif-num);color:var(--ink)}
.lg-total small{font:italic 500 26px var(--serif-num);color:var(--mute)}
.lg-act{margin-top:14px}
.lg-dots{gap:7px;margin:12px 0 10px}
.lg-dots i{width:28px;height:28px;display:grid;place-items:center;font:italic 500 15px/1 var(--serif-num);color:var(--mute);border:1px solid var(--ink2);border-radius:50%}
.lg-dots i.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.lg-entry{display:block;padding:14px 16px 16px;border:1px solid var(--ink);border-top:4px double var(--ink);text-align:center;color:inherit}
.lg-entry-k{display:block;font:600 16px var(--serif-num);letter-spacing:.14em;padding-bottom:8px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.lg-entry b{display:block;font-size:15px}
.lg-entry b::after{content:' ›';color:var(--mute)}
.lg-entry small{display:block;font-size:12.5px;color:var(--mute);margin-top:4px;line-height:1.5}
.st-map{user-select:none;-webkit-user-select:none}
.st-stage{border:1px solid var(--ink2);text-align:center;font:600 9.5px var(--num);letter-spacing:.32em;padding:3px 0;margin-bottom:8px;color:var(--ink2)}
.st-r{display:grid;margin-bottom:2px;align-items:center}
.st-r>b{font:600 8.5px var(--num);color:var(--mute)}
.st-gap{margin-top:7px}
.st-r>i{display:block}
.st-r>button, .st-r>span{aspect-ratio:1;background:#efc6b1;padding:0;min-width:0}
.st-r>button.held{background:#b9716c;border-color:#98504c}
.st-r>button.on{border-color:var(--ink);position:relative;z-index:1}
.lg-sum .st-r>span{border-color:var(--line-s)}
.lg-sum .st-r>span.v{border-color:#b06f60}
.lg-sum .st-r>span.v2{border-color:var(--ink)}
.lg-sum .st-map{margin-top:6px}
.lg-empty-p{font-size:12.5px;color:var(--mute);padding:10px 0;border-top:1px solid var(--line)}
.lg-fl{margin-top:0}
.lg-inf{display:block;margin:-4px 0 10px 30px;padding:0;font-size:12px;color:var(--mute);text-decoration:underline;text-underline-offset:3px;text-align:left}
.lg-inf.on{color:var(--ink);text-decoration:none;font:600 12.5px var(--num)}
.lg-keep .lg-note{font-size:13px;color:var(--ink2);line-height:1.65;margin:4px 0 14px}
.lg-keep-b{display:flex;gap:8px}
.lg-keep-b button{flex:1;height:44px;border:1px solid var(--ink);font-size:14px;font-weight:700;color:var(--ink)}
.lg-md{position:fixed;inset:0;z-index:90;display:flex;align-items:flex-end;justify-content:center}
.lg-md[hidden]{display:none}
.lg-md-bg{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.lg-md-p{position:relative;width:100%;max-width:440px;max-height:92vh;max-height:92dvh;overflow:auto;background:var(--paper);color:var(--ink);padding:18px 18px calc(18px + env(safe-area-inset-bottom,0px));border-top:4px double var(--ink)}
@media (min-width:768px){
.lg-md{align-items:center}
.lg-md-p{border:1px solid var(--ink);border-top:4px double var(--ink)}
}
.lg-md-x{position:absolute;right:8px;top:8px;width:36px;height:36px;font-size:26px;line-height:1;color:var(--mute)}
.lg-md-h{font:italic 500 30px/1.1 var(--serif-num);margin:4px 0 4px}
.lg-md-h small{font:500 14px var(--num);color:var(--mute);}
.lg-md-c{font-size:13px;color:var(--ink2);padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:14px}
.lg-md-s{margin-bottom:16px}
.lg-md-l{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;font-weight:700;margin-bottom:8px}
.lg-md-l b{font:600 14px var(--num)}
.lg-md-b{display:flex;gap:8px;margin-top:6px}
.lg-md-b button{flex:1;height:44px;font-size:14px;font-weight:700;border:1px solid var(--ink)}
.lg-md-clear{color:var(--ink)}
.lg-md-ok{background:var(--ink);color:var(--paper)}
.lg-md-t{font-size:13px;color:var(--ink2);line-height:1.6;margin:8px 0 14px}
.lg-md-sm{font-size:12px;color:var(--mute);margin:10px 0 0}
.lg-file{display:flex;align-items:center;justify-content:center;height:44px;border:1px dashed var(--line-s);font-size:13.5px;font-weight:600;cursor:pointer;margin-bottom:8px}
#lg-rs-t{width:100%;border:1px solid var(--line-s);background:transparent;color:var(--ink);font:12px/1.5 ui-monospace,monospace;padding:8px;margin-bottom:10px;resize:vertical}
html.lg-lock, html.lg-lock body{overflow:hidden}
.lg-sel{width:100%;height:44px;border:1px solid var(--line-s);background:transparent;color:var(--ink);font-size:14px;padding:0 36px 0 12px;appearance:none;-webkit-appearance:none;border-radius:0;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 18px) 19px,calc(100% - 13px) 19px;background-size:5px 5px;background-repeat:no-repeat}
html[data-mode="after"] .lg-sel option{background:#1b1a18;color:#ece6da}

.st-r>button, .st-r>span{display:grid;place-items:center;font:600 7.5px/1 var(--num);color:#8d4f40;letter-spacing:-.02em;overflow:hidden}




.lg-md-h{display:flex;align-items:baseline;gap:7px;font-variant-numeric:lining-nums;font-feature-settings:'lnum' 1}
.lg-md-h em{font:600 18px/1 var(--sans);font-style:normal;color:var(--ink)}
.lg-md-h small{margin-left:2px}
.lg-dots i{font-variant-numeric:lining-nums;font-feature-settings:'lnum' 1;line-height:1}
.lg-dots i{padding-bottom:1.5px}
.st-r{grid-template-columns:11px repeat(10,var(--st,1fr)) 7px repeat(10,var(--st,1fr));gap:2px;justify-content:center}
.st-map .st-stage{margin-left:auto;margin-right:auto}
.lg-k2>span{display:inline-flex;align-items:baseline;}
.lg-ck{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;font-weight:600;margin-bottom:12px;cursor:pointer}
.lg-ck input:not(.tg){width:18px;height:18px;accent-color:var(--ink)}
.lg-ck small{flex-basis:100%;font-size:12px;font-weight:400;color:var(--mute);padding-left:26px}
.lg-ck.dis{color:var(--soft);cursor:default}
.st-r>button, .st-r>span{border:0;border-radius:0}
.st-r>button{background:#efc6b1}
.st-r>button.on{box-shadow:none}




.lg-k2>span{gap:2px}








.lg-sum .st-r>span.v, .lg-sum .st-r>span.v2{box-shadow:none;}

.lg-sum .st-r>span{background:#e6e2dd;box-shadow:none;color:#a39c96}
.lg-sum .st-r>span.v, .lg-sum .st-r>span.v2{background:#a03e3a;color:#fff}
html[data-mode="after"] .lg-sum .st-r>span{background:#2e2c2a;box-shadow:none;color:#77716b}
.lg-sum .st-r>span.v2{background:#822e2b}
.lg-sum .st-r>span.v3{background:#651f1e}
.lg-sum .st-r>span.v4{background:#471312}
html[data-mode="after"] .lg-sum .st-r>span.v1{background:#7f322f;color:#f1e4e1}
html[data-mode="after"] .lg-sum .st-r>span.v2{background:#a03e3a;color:#fff}
html[data-mode="after"] .lg-sum .st-r>span.v3{background:#c4574f;color:#fff}
html[data-mode="after"] .lg-sum .st-r>span.v4{background:#e3796d;color:#2a1210}
@media (min-width:768px){
#p-ledger .lg-sum .st-map{max-width:460px;margin-left:auto;margin-right:auto}
.lg-md-p .st-map{max-width:404px;margin-left:auto;margin-right:auto}
}
.st-r>button.on{background:#a03e3a!important;color:#fff!important}
.lg-total{position:relative}
.lg-plan{position:absolute;left:0;bottom:10px;font:600 12.5px var(--num);color:var(--mute)}
.lg-pl{font-style:normal;font-size:11px;font-weight:700;color:#a03e3a;border:1px solid currentColor;padding:0 4px;margin-left:4px;vertical-align:1px}
.lg-f{margin-top:0}
.lg-runs .c .pk{font-weight:700;color:var(--ink)}
.lg-rs-m{display:grid;gap:8px;margin:0 0 12px}
.lg-rs-m label{display:grid;grid-template-columns:20px 1fr;align-items:center;column-gap:6px;font-size:14px;font-weight:600;cursor:pointer}
.lg-rs-m input{width:16px;height:16px;accent-color:var(--ink)}
.lg-rs-m small{grid-column:2;font-size:12px;font-weight:400;color:var(--mute)}
.lg-md-p:focus{outline:none}
.lg-md :focus-visible{outline:2px solid #a03e3a;outline-offset:2px}
.st-r>button:focus-visible{outline:2px solid #a03e3a;outline-offset:1px;position:relative;z-index:2}
.lg-md-b button:only-child{flex:1}
.lg-md-h-s{font:700 19px/1.4 var(--sans);font-style:normal;letter-spacing:-.01em;margin:6px 36px 4px 0}
.lg-only.tgl{max-width:none;padding-top:4px}
.lg-ck.tgl{flex-wrap:wrap}
.lg-ck.tgl small{flex-basis:100%;padding-left:0}
.lg-pc-t{font-size:13px;color:var(--mute);margin:-2px 0 12px;line-height:1.6}
.lg-pc-g{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.lg-pc-g li{position:relative;aspect-ratio:1;display:flex;flex-direction:column;justify-content:space-between;padding:8px 9px;box-shadow:inset 0 0 0 1px var(--line);background:transparent;color:var(--mute)}
.lg-pc-g li b{color:var(--soft,#b3aaa3);}
.lg-pc-g li small{font:600 10.5px/1.2 var(--num);letter-spacing:.04em}
.lg-pc-g li i{position:absolute;top:8px;right:8px;font-style:normal;font-size:10.5px;font-weight:700;color:#a03e3a}
.lg-pc-g li.now{box-shadow:inset 0 0 0 1.5px var(--ink)}
.lg-pc-g li.on{background:#a03e3a;box-shadow:none;color:rgba(255,255,255,.78)}
.lg-pc-g li.on b{color:#fff}
.lg-pc-g li.on i{color:#fff;opacity:.85}
.lg-pc-g li.im{background-size:cover;background-position:center}
.lg-pc-done{margin:12px 0 0;font-size:13px;font-weight:700;color:#a03e3a}
html[data-mode="after"] .lg-pc-g li{box-shadow:inset 0 0 0 1px #3b3735}
html[data-mode="after"] .lg-pc-g li.now{box-shadow:inset 0 0 0 1.5px var(--ink)}
.lg-pc-g li b{font:italic 500 30px/1 var(--serif-num);font-variant-numeric:lining-nums;letter-spacing:.01em}
@media (min-width:768px){
.lg-pc-g{max-width:460px}
}

/* 26.10.01 작가: 기록하고 → 뽑고. 맨 위 짧은 머리말과 두 단계 안내, 그 아래 회차 기록, 그다음 정산판(이미지로 저장) */
.lg-head .lg-steps{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.lg-head .lg-steps li{display:flex;gap:10px;align-items:baseline;font-size:13px;color:var(--mute);line-height:1.5}
.lg-head .lg-steps b{flex:none;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1px solid var(--line-s,currentColor);font:600 11px/1 'Outfit',sans-serif;color:var(--ink)}

/* 26.10.01 교정 기록 카드: 도장 직접 더하기·빼기 */
.lg-sx{display:flex;align-items:center;gap:12px;margin:4px 0 12px;font-size:12.5px;line-height:1.55;color:var(--mute)}
.lg-sx em{font-style:normal;color:var(--ink);font-weight:600}
.lg-sx-b{flex:none;display:flex;gap:6px}
.lg-sx-b button{width:36px;height:36px;border:1px solid var(--line-s,var(--line));background:transparent;color:var(--ink);font-size:18px;line-height:1}
.lg-sx-b button:focus{outline:0}
.lg-sx-b button:focus-visible{background:var(--band,rgba(127,127,127,.12))}

/* 26.10.02 나가기 안내 창: 다시 보지 않기 */
.lg-lv-never{display:block;margin:14px auto 0;padding:6px 10px;border:0;background:none;color:var(--mute);font:inherit;font-size:12.5px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.lg-lv-never:focus{outline:0}
.lg-lv-never:focus-visible{color:var(--ink)}
.lg-runs .c .tagb{margin-left:5px;color:var(--mute);border-color:var(--line-s)}   /* 26.10.14 회차 딱지(전관). 예정 딱지와 헷갈리지 않게 먹색 */
/* 26.10.18 작가: 회차 기록 창의 메모 */
.lg-memo{display:block;width:100%;min-height:76px;border:1px solid var(--line-s);background:transparent;color:var(--ink);font:16px/1.6 var(--sans,inherit);padding:10px 12px;border-radius:0;resize:vertical;box-sizing:border-box}
.lg-memo:focus{outline:2px solid var(--ink);outline-offset:-1px}
.lg-sel option:disabled{color:var(--mute)}
