:root{--green:#155b49;--sage:#e5f0e9;--line:#cdd3d6}*{box-sizing:border-box}body{margin:0;color:#12202d;font-family:'Malgun Gothic',sans-serif;background:white}button{font:inherit;cursor:pointer;border:1px solid #88949e;background:white;border-radius:9px;padding:14px;color:inherit;min-height:48px}button:focus-visible{outline:3px solid #218678;outline-offset:2px}.shell{height:100dvh;display:grid;grid-template-columns:25% 75%;max-width:1800px;margin:auto}aside{padding:28px 24px;background:#fafaf7;border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}.memorial{display:flex;align-items:center;gap:18px}.portrait{width:38%;height:145px;background:#d5d6d2;display:grid;place-items:center;border:5px double #fff;font-size:48px;color:#555}.memorial h2{font-size:26px;margin:0}.memorial p{margin:8px 0}.funeral{display:flex;border:1px solid var(--line);border-radius:8px;margin:18px 0;padding:0;line-height:1.65;font-size:18px}.funeral b{background:#eee;padding:18px 14px;display:flex;align-items:center}.funeral div{padding:10px 14px}#people{overflow:auto;flex:1;border-top:1px solid var(--line);padding-top:8px}.person{width:100%;border:0;border-bottom:1px solid #e1e4e3;border-radius:0;display:grid;grid-template-columns:38% 1fr 24px;text-align:left;align-items:center;font-size:19px;padding:12px 14px;min-height:53px}.person span:first-child{font-size:16px;color:#52616a}.person.selected{background:var(--sage);border-radius:9px}.person .check{color:var(--green);font-weight:bold}.admin-link{font-size:12px;color:#777;margin-top:8px}main{padding:28px;display:flex;flex-direction:column;min-height:0}header{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px}h1{font-size:clamp(20px,2.6vw,36px);margin:0}header button{white-space:nowrap}section{border:1px solid var(--line);border-radius:12px;padding:22px;flex:1;min-height:0}section[hidden]{display:none!important}#waiting{display:grid;align-content:center;text-align:center;color:#60706c}#amount-screen h2{text-align:center;font-size:32px;margin:2px 0 8px}.target{font-size:21px}#amount-screen>.target{text-align:center;margin:0 0 16px}.amount-display{background:var(--sage);border-radius:10px;padding:20px;display:flex;align-items:center;justify-content:space-between;gap:16px}.amount-display strong{font-size:clamp(22px,3.6vw,50px)}.amount-columns{display:grid;grid-template-columns:55% 45%;margin:15px 0;gap:0}.amount-columns>div:first-child{padding-right:20px;border-right:1px solid var(--line)}.amount-columns>div:last-child{padding-left:20px}h3{margin:12px 0}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}#presets button{height:85px;font-size:24px;font-weight:bold}#keypad button{height:61px;font-size:25px}#keypad button:first-of-type{font-weight:normal}.active{background:var(--sage);border:2px solid var(--green)}.actions{display:grid;grid-template-columns:44% 1fr;gap:12px;margin-top:16px}.actions button{min-height:64px;font-size:26px}.primary{background:var(--green);color:#fff;border-color:var(--green)}#writing{display:flex;flex-direction:column;border:0;padding:0}.summary{display:flex;justify-content:space-between;align-items:center;background:var(--sage);border-radius:9px;padding:12px 20px;margin-bottom:12px;font-size:19px}.summary button{border:0;background:transparent;color:var(--green);padding:8px}.summary strong{font-size:28px}.toolbar{display:flex;justify-content:space-between;border:1px solid var(--line);border-radius:9px;padding:7px;margin-bottom:12px}.toolbar button{border:0;flex:1;padding:10px}.paper{flex:1;position:relative;border:1px solid #9aa8b6;border-radius:10px;overflow:hidden;min-height:160px;touch-action:none}canvas{display:block;width:100%;height:100%;touch-action:none}#placeholder{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:#999;font-size:clamp(22px,3vw,38px);white-space:nowrap;pointer-events:none}small{display:block;font-size:17px;margin-top:18px}textarea{position:absolute;inset:20px;width:calc(100% - 40px);height:calc(100% - 40px);border:0;font:28px 'Malgun Gothic';resize:none;background:#fff}.footer{text-align:center;font-size:14px;color:#687382;margin:18px 0 0}#notice{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#172d27;color:#fff;border-radius:8px;padding:12px 22px;display:none;z-index:10}@media(max-width:800px){.shell{grid-template-columns:28% 72%}aside{padding:14px 10px}main{padding:14px}.portrait{height:95px}.memorial{gap:8px}.memorial h2{font-size:19px}.person{padding:10px 5px;font-size:16px}.person span:first-child{font-size:13px}.funeral{font-size:13px}.funeral b,.funeral div{padding:8px}.amount-columns>div:first-child{padding-right:8px}.amount-columns>div:last-child{padding-left:8px}#presets button{height:65px;font-size:17px}#keypad button{height:46px;font-size:19px}button{padding:8px}.actions button{font-size:21px}h1{font-size:20px}.summary{padding:8px;font-size:14px}.summary strong{font-size:20px}.toolbar button{font-size:13px}}
.portrait{width:130px;height:158px;flex-shrink:0;background-image:url('/static/design-reference.png');background-size:1448px 1086px;background-position:-35px -40px;border:0;color:transparent}.memorial{gap:18px}@media(max-width:1000px){.portrait{width:78px;height:95px;background-size:869px 652px;background-position:-21px -24px}.memorial{gap:10px}}
#records textarea{position:static;inset:auto;display:block;width:100%;height:auto;min-height:96px;border:1px solid var(--line);border-radius:8px;padding:10px;font:18px 'Malgun Gothic';resize:vertical;margin:12px 0}#records section{margin:16px 0}#records canvas{height:250px;object-fit:contain}#records button{margin:0 10px 12px 0}
#amount-screen.amount-panel{max-width:840px;margin:12px auto;width:100%;border:1px solid var(--line);border-radius:20px;padding:24px}
.idle-promo{max-width:90%;max-height:40vh;object-fit:contain;margin:20px auto;border-radius:12px}

#connection{font-size:12px;color:#61716b;text-align:right;min-height:16px;margin-bottom:4px}#connection.attention{color:#8c4b00} .admin-link{min-height:44px;display:flex;align-items:center}
@media(max-height:820px) and (min-width:801px){aside{padding:16px 20px}main{padding:16px 24px}header{margin-bottom:12px}.portrait{height:126px;width:104px}.funeral{margin:12px 0}.person{min-height:48px;padding-top:9px;padding-bottom:9px}#presets button{height:62px}#keypad button{height:48px}.amount-display{padding:12px}.amount-columns{margin:8px 0}.actions button{min-height:54px;font-size:23px}.footer{margin-top:10px}}
@media(orientation:portrait){.shell{grid-template-columns:30% 70%}aside{padding:16px 10px}.memorial{flex-wrap:wrap}.funeral{font-size:14px}.funeral b,.funeral div{padding:8px}main{padding:16px 12px}header{flex-wrap:wrap}h1{font-size:24px}.amount-columns{grid-template-columns:1fr 1fr}#presets button{font-size:18px;height:64px}#keypad button{height:48px}.summary{flex-wrap:wrap;gap:8px}.toolbar button{font-size:14px}.actions button{font-size:21px}}

#waiting.has-saved-preview{position:relative}#saved-preview{position:absolute;top:24px;right:24px;width:min(330px,55%);border:1px solid var(--line);border-radius:10px;background:white;padding:16px;text-align:center;color:var(--green)}#saved-preview[hidden]{display:none}.saved-content img{width:100%;height:130px;object-fit:contain}.saved-content p{color:#17202a;white-space:pre-wrap;overflow-wrap:anywhere;max-height:160px;overflow:auto;font-size:21px}#saved-preview small{font-size:14px;margin-top:8px}

#waiting.has-saved-preview>.idle-promo{display:none}



#saved-preview{max-height:calc(100% - 48px);overflow:auto}.saved-entry{border:1px solid var(--line);border-radius:8px;padding:6px;margin-top:8px;background:white}.saved-entry img{height:85px}.saved-entry p{margin:4px 0;font-size:18px;max-height:80px}

/* Recent saved ink cards: fit up to ten entries without changing the surrounding screen. */
#saved-preview{height:calc(100% - 48px);max-height:none;overflow:hidden;display:flex;flex-direction:column;padding:12px;gap:8px}
#saved-preview .saved-content{display:grid;flex:1;min-height:0;gap:5px}
#saved-preview .saved-entry{margin:0;min-height:0;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px;gap:2px}
#saved-preview .saved-entry img{width:100%;height:100%;min-height:0;flex:1;object-fit:contain;object-position:center}
#saved-preview .saved-entry p{margin:0;min-height:0;max-height:100%;width:100%;flex:1;display:grid;place-items:center;text-align:center;font-size:clamp(12px,1.2vw,18px);overflow:auto}
#saved-preview small{margin:0;flex-shrink:0}#saved-preview>strong{flex-shrink:0}