:root{--green:#087a4a;--green2:#0a9a61;--ink:#15241d;--muted:#6c7a73;--bg:#f3f7f5;--card:#fff;--line:#dce7e1;--red:#e34b4b;--shadow:0 18px 45px rgba(24,65,45,.11)}
*{box-sizing:border-box}body{margin:0;font-family:'Noto Sans KR','Noto Sans SC',sans-serif;background:linear-gradient(180deg,#edf8f2 0,#f8faf9 35%,#eef4f1 100%);color:var(--ink);min-height:100vh}.app-shell{width:min(100%,760px);min-height:100vh;margin:auto;background:rgba(255,255,255,.66);box-shadow:0 0 70px rgba(0,0,0,.05)}button,input,select{font:inherit}.topbar{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;position:sticky;top:0;background:rgba(255,255,255,.88);backdrop-filter:blur(14px);z-index:10;border-bottom:1px solid rgba(220,231,225,.8)}.brand{display:flex;align-items:center;gap:10px;border:0;background:none;text-align:left;color:var(--ink);padding:0}.brand-mark{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--green),var(--green2));font-size:22px;font-weight:800}.brand strong,.brand small{display:block}.brand strong{font-size:18px}.brand small{color:var(--muted);font-size:11px}.screen{display:none;padding:24px 22px 46px;min-height:calc(100vh - 79px)}.screen.active{display:block}.hero{padding:28px 4px 22px}.eyebrow{margin:0 0 8px;color:var(--green);font-weight:800;letter-spacing:.08em;font-size:13px}.hero h1{font-size:clamp(38px,9vw,62px);line-height:1.08;margin:0 0 18px;letter-spacing:-.04em}.hero h1 span{color:var(--green)}.hero>p:last-child{color:var(--muted);line-height:1.7;max-width:590px}.role-grid{display:grid;gap:12px}.role-card{border:1px solid var(--line);background:#fff;border-radius:22px;padding:19px;display:grid;grid-template-columns:52px 1fr auto;gap:14px;align-items:center;text-align:left;box-shadow:0 8px 25px rgba(20,60,40,.04)}.role-card:hover{transform:translateY(-1px);box-shadow:var(--shadow)}.role-icon{width:52px;height:52px;border-radius:17px;display:grid;place-items:center;font-size:22px;font-weight:800}.student .role-icon{background:#e4f7ee;color:var(--green)}.store .role-icon{background:#fff3da;color:#a96d00}.teacher .role-icon{background:#e8eefb;color:#3458a7}.role-card strong,.role-card small{display:block}.role-card strong{font-size:17px}.role-card small{color:var(--muted);margin-top:3px}.role-card b{color:var(--green)}.notice{margin-top:22px;padding:16px 18px;background:#eef8f3;border-radius:18px;border:1px dashed #bcdacb}.notice strong{color:var(--green)}.notice p{margin:4px 0 0;color:var(--muted);font-size:13px}.back{border:0;background:none;padding:6px 0 18px;color:var(--muted);font-weight:700}.back.light{color:rgba(255,255,255,.85);padding:0}.panel{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:22px;box-shadow:0 8px 24px rgba(20,60,40,.04);margin-bottom:16px}.panel.compact{max-width:480px;margin:30px auto}.panel h2{font-size:28px;margin:0 0 22px}.panel h3{margin:0}.panel-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}label{display:block;font-weight:700;margin:14px 0;color:#34463d}input,select{width:100%;border:1px solid #ccd9d2;border-radius:14px;padding:14px 15px;background:#fbfdfc;margin-top:7px;outline:none}input:focus,select:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(8,122,74,.1)}button{cursor:pointer}.primary,.secondary,.ghost{border-radius:14px;padding:14px 18px;font-weight:800}.primary{width:100%;border:0;background:linear-gradient(135deg,var(--green),var(--green2));color:#fff;box-shadow:0 10px 22px rgba(8,122,74,.2)}.secondary{border:1px solid #bfd6ca;background:#fff;color:var(--green)}.ghost{border:0;background:#edf3f0;color:#4a5c53}.small{padding:9px 12px;font-size:12px;width:auto}.helper{color:var(--muted);font-size:13px;line-height:1.55}.student-header{margin:-24px -22px 0;padding:22px 22px 76px;background:linear-gradient(135deg,#086d43,#0ba067);color:#fff}.student-header p{font-size:18px}.wallet-card{margin:-58px 0 18px;padding:22px;background:#fff;border-radius:25px;box-shadow:var(--shadow);border:1px solid #dcebe3}.wallet-card span,.wallet-card small{display:block;color:var(--muted)}.wallet-card strong{display:block;font-size:48px;letter-spacing:-.04em;color:var(--green);margin:5px 0}.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}.big{min-height:115px}.big span{font-size:28px;display:block;margin-bottom:6px}.big small{font-weight:600;opacity:.75}.secondary.big{background:#fff}.transaction-list{display:grid;gap:10px}.tx-item{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-bottom:1px solid #edf2ef}.tx-item:last-child{border-bottom:0}.tx-item span,.tx-item small{display:block}.tx-item span{font-weight:700}.tx-item small{color:var(--muted);margin-top:3px}.tx-item b{color:var(--red)}.empty{color:var(--muted);text-align:center;padding:24px 0}.money-input{display:flex;align-items:center;border:1px solid #ccd9d2;border-radius:16px;margin-top:8px;background:#fbfdfc;padding-left:15px}.money-input span{font-size:30px;font-weight:800;color:var(--green)}.money-input input{border:0;box-shadow:none;margin:0;font-size:30px;font-weight:800}.quick-amounts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.quick-amounts button{border:1px solid #d1ded7;background:#fff;border-radius:12px;padding:10px;font-weight:800;color:var(--green)}.balance-preview{display:flex;justify-content:space-between;padding:16px 4px;color:var(--muted)}.balance-preview strong{color:var(--ink)}.store-mini{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line)}.store-mini>span{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:#fff3da;color:#9b6709;font-weight:800}.store-mini b,.store-mini small{display:block}.store-mini small{color:var(--muted)}.success-wrap{text-align:center;max-width:500px;margin:28px auto}.check{width:82px;height:82px;margin:24px auto 16px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--green),var(--green2));color:#fff;font-size:44px;box-shadow:0 14px 30px rgba(8,122,74,.25)}.success-wrap h2{font-size:27px;margin:0 0 20px}.receipt{background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 22px;text-align:left;box-shadow:var(--shadow)}.receipt div{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px dashed #dce7e1}.receipt div:last-child{border-bottom:0}.receipt span{color:var(--muted)}.thanks{font-size:22px;font-weight:800;color:var(--green)}.store-display{text-align:center;background:#fff;border-radius:30px;padding:34px 24px;box-shadow:var(--shadow);border:1px solid var(--line);max-width:520px;margin:auto}.store-display h2{font-size:34px;margin:4px 0}.store-display>p{color:var(--muted)}.qr-box{width:270px;height:270px;margin:25px auto;padding:15px;background:#fff;border:10px solid #eaf4ef;border-radius:24px;display:grid;place-items:center}.qr-box img,.qr-box canvas{max-width:100%;height:auto}.store-caption{font-weight:800;color:var(--green);margin-bottom:18px}.teacher-title{display:flex;gap:18px;align-items:flex-start}.teacher-title h2{margin:0 0 18px}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}.stats-grid>div{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px}.stats-grid span,.stats-grid strong{display:block}.stats-grid span{font-size:12px;color:var(--muted)}.stats-grid strong{font-size:22px;margin-top:4px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:570px}th,td{text-align:left;padding:12px 10px;border-bottom:1px solid #edf2ef;font-size:14px}th{color:var(--muted);font-size:12px}.cell-input{width:80px;padding:8px 9px;margin:0;border-radius:9px}.danger{border:0;background:#fff0f0;color:#c83f3f;border-radius:10px;padding:8px 10px;font-weight:700}#reader{border:0!important;border-radius:18px;overflow:hidden;background:#e9efec;min-height:260px}dialog{border:0;border-radius:22px;padding:0;box-shadow:0 25px 80px rgba(0,0,0,.25);width:min(92vw,430px)}dialog::backdrop{background:rgba(15,30,22,.45)}dialog form{padding:22px}.dialog-actions{display:flex;gap:10px;margin-top:18px}.dialog-actions button{width:100%}.phrase-block{margin-bottom:18px}.phrase-title{font-weight:800;color:var(--green);margin-bottom:8px;font-size:13px;letter-spacing:.04em}.phrase-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}.phrase-list li{display:flex;flex-direction:column;gap:2px;padding:12px 14px;background:#f6faf8;border:1px solid var(--line);border-radius:14px}.phrase-list .cn{font-weight:800;font-size:16px;color:var(--ink)}.phrase-list .py{color:var(--green);font-size:13px;font-style:italic}.phrase-list .kr{color:var(--muted);font-size:13px}@media(max-width:520px){.topbar{padding:14px 16px}.screen{padding:20px 16px 38px}.hero h1{font-size:40px}.action-grid{grid-template-columns:1fr}.stats-grid{grid-template-columns:1fr 1fr}.stats-grid>div:last-child{grid-column:1/-1}.qr-box{width:240px;height:240px}.role-card{grid-template-columns:48px 1fr auto;padding:16px}.role-icon{width:48px;height:48px}.quick-amounts{grid-template-columns:repeat(2,1fr)}}