/* ============================================================
   기숙사 수광비 — 학생 정산 조회 (모바일 우선, 모던 테마)
   ============================================================ */
:root{
  --bg:#0f1226;            /* 딥 네이비 배경(그라데이션 베이스) */
  --bg2:#1a1f4b;
  --card:#ffffff;
  --ink:#1f2330;
  --muted:#7a8194;
  --line:#eef0f5;
  --brand:#6c5ce7;         /* 보라(메인) */
  --brand2:#8e7bff;
  --accent:#00cec9;        /* 청록 포인트 */
  --ok:#1ec98b;
  --warn:#ff6b6b;
  --shadow:0 12px 36px rgba(20,18,60,.16);
  --radius:18px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  font-family:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',system-ui,-apple-system,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(142,123,255,.35), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(0,206,201,.20), transparent 55%),
    linear-gradient(160deg,var(--bg),var(--bg2));
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

.shell{max-width:480px;margin:0 auto;padding:22px 18px 40px;min-height:100vh;display:flex;flex-direction:column;}

/* 브랜드 헤더 */
.brand{display:flex;align-items:center;gap:11px;color:#fff;margin:14px 4px 22px;}
.brand .logo{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--brand),var(--brand2));box-shadow:0 8px 20px rgba(108,92,231,.5);font-size:20px;}
.brand h1{font-size:18px;font-weight:800;margin:0;letter-spacing:-.3px;}
.brand p{margin:2px 0 0;font-size:12.5px;color:rgba(255,255,255,.72);font-weight:500;}

/* 카드 */
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px 22px;}
.card + .card{margin-top:16px;}
.card h2{font-size:19px;font-weight:800;margin:0 0 4px;letter-spacing:-.4px;}
.card .sub{color:var(--muted);font-size:13.5px;margin:0 0 20px;line-height:1.5;}

/* 입력 */
.field{margin-bottom:15px;}
.field label{display:block;font-size:13px;font-weight:700;color:#4a4f60;margin:0 0 7px 2px;}
.field input{
  width:100%;height:52px;border:1.6px solid var(--line);border-radius:14px;
  padding:0 16px;font-size:16px;color:var(--ink);background:#fbfbfe;transition:.15s;outline:none;
}
.field input:focus{border-color:var(--brand);background:#fff;box-shadow:0 0 0 4px rgba(108,92,231,.13);}
.field .hint{font-size:12px;color:var(--muted);margin:6px 2px 0;}

/* 버튼 */
.btn{
  width:100%;height:54px;border:0;border-radius:14px;cursor:pointer;
  font-size:16px;font-weight:800;letter-spacing:-.2px;color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  box-shadow:0 10px 24px rgba(108,92,231,.42);transition:.15s;
}
.btn:active{transform:translateY(1px);box-shadow:0 6px 16px rgba(108,92,231,.4);}
.btn.sec{background:#f0f1f7;color:#4a4f60;box-shadow:none;}
.btn-row{margin-top:8px;}

.alt{text-align:center;margin-top:18px;font-size:14px;color:var(--muted);}
.alt a{color:var(--brand);font-weight:800;text-decoration:none;}

/* 알림 박스 */
.msg{border-radius:13px;padding:13px 15px;font-size:13.5px;line-height:1.55;margin-bottom:16px;font-weight:600;}
.msg.err{background:#fff0f0;color:#c0392b;border:1px solid #ffd6d6;}
.msg.info{background:#eef6ff;color:#1f6fb0;border:1px solid #d4e7fb;}
.msg.ok{background:#eafaf2;color:#138a5e;border:1px solid #c8efdd;}

/* 상단바(로그인 후) */
.topbar{display:flex;align-items:center;justify-content:space-between;color:#fff;margin:10px 4px 18px;}
.topbar .who{font-size:14px;font-weight:600;}
.topbar .who b{font-weight:800;}
.topbar .out{font-size:13px;color:rgba(255,255,255,.85);text-decoration:none;border:1px solid rgba(255,255,255,.3);
  padding:7px 13px;border-radius:10px;font-weight:700;}

/* 요약 카드 */
.summary{background:linear-gradient(135deg,#21264f,#2d2f6b);color:#fff;border-radius:var(--radius);
  padding:22px;box-shadow:var(--shadow);margin-bottom:16px;}
.summary .lbl{font-size:13px;color:rgba(255,255,255,.7);font-weight:600;}
.summary .amt{font-size:32px;font-weight:900;letter-spacing:-1px;margin:6px 0 2px;}
.summary .amt small{font-size:17px;font-weight:700;margin-left:3px;}
.summary .note{font-size:12.5px;color:rgba(255,255,255,.65);margin-top:6px;}

/* 정산 내역 리스트 */
.sec-title{color:rgba(255,255,255,.9);font-size:14px;font-weight:800;margin:22px 6px 12px;}
.filterbar{display:flex;gap:8px;margin:0 2px 12px;}
.filterbar select{flex:1;height:44px;border:1.5px solid rgba(255,255,255,.25);border-radius:12px;
  background:rgba(255,255,255,.10);color:#fff;font-size:14px;font-weight:700;padding:0 12px;outline:none;
  -webkit-appearance:none;appearance:none;}
.filterbar select option{color:#1f2330;}
.item{background:#fff;border-radius:15px;box-shadow:0 6px 18px rgba(20,18,60,.10);padding:16px 17px;margin-bottom:11px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;}
.item .when{font-size:15px;font-weight:800;}
.item .meta{font-size:12.5px;color:var(--muted);margin-top:3px;}
.item .right{text-align:right;}
.item .price{font-size:16px;font-weight:800;}
.chip{display:inline-block;font-size:11.5px;font-weight:800;padding:4px 10px;border-radius:999px;margin-top:5px;}
.chip.paid{background:#eafaf2;color:#138a5e;}
.chip.due{background:#fff0f0;color:#d63031;}
.chip.charge{background:#eef0f5;color:#7a8194;}

.empty{background:#fff;border-radius:15px;padding:36px 20px;text-align:center;color:var(--muted);font-size:14px;box-shadow:var(--shadow);}

.more-btn{width:100%;height:48px;margin-top:4px;border:1.5px solid rgba(255,255,255,.28);border-radius:13px;
  background:rgba(255,255,255,.10);color:#fff;font-size:14.5px;font-weight:800;cursor:pointer;}
.more-btn:active{background:rgba(255,255,255,.18);}

.foot{margin-top:auto;padding-top:24px;text-align:center;color:rgba(255,255,255,.45);font-size:11.5px;}

/* 하단 탭바 */
.shell{padding-bottom:96px;}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:5000;max-width:480px;margin:0 auto;
  display:flex;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-top:1px solid #e7e9f0;
  box-shadow:0 -6px 24px rgba(20,18,60,.12);}
.tabbar a{flex:1;text-align:center;padding:9px 0 11px;font-size:11.5px;font-weight:700;color:#9aa0b5;text-decoration:none;}
.tabbar a .ic{display:block;font-size:20px;margin-bottom:2px;filter:grayscale(1);opacity:.55;}
.tabbar a.on{color:var(--brand);}
.tabbar a.on .ic{filter:none;opacity:1;}

/* 클릭 가능한 정산 항목 */
a.item{text-decoration:none;color:inherit;}
a.item:active{transform:scale(.995);}
.item .arrow{color:#c5cad8;font-size:18px;margin-left:6px;}

/* 미니 차트(월별 부과 추이) */
.chartcard{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 18px 14px;margin-bottom:16px;}
.chartcard .ct{font-size:13px;font-weight:800;color:#4a4f60;margin-bottom:14px;}
.bars{display:flex;align-items:flex-end;gap:8px;height:110px;}
.bars .b{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;height:100%;justify-content:flex-end;}
.bars .b .bar{width:100%;max-width:26px;border-radius:7px 7px 3px 3px;background:linear-gradient(180deg,var(--brand2),var(--brand));min-height:4px;}
.bars .b .bl{font-size:10.5px;color:var(--muted);font-weight:700;}
.bars .b .bv{font-size:10px;color:#aeb4c6;}

/* 상세 항목 테이블 */
.dt-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;}
.bill-head{text-align:center;border-bottom:2px solid #2d2f6b;padding-bottom:12px;margin-bottom:14px;}
.bill-head .bh-school{font-size:16px;font-weight:900;color:#2d2f6b;letter-spacing:-.3px;}
.bill-head .bh-stu{font-size:13px;color:#7a8194;margin-top:4px;font-weight:700;}
.dt-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px;}
.dt-head .t{font-size:18px;font-weight:800;}
.dt-head .s{font-size:12.5px;color:var(--muted);}
.dt-period{font-size:12.5px;color:var(--muted);margin-bottom:16px;}
.dt-row{display:flex;justify-content:space-between;padding:11px 2px;border-bottom:1px solid var(--line);font-size:14.5px;}
.dt-row .k{color:#4a4f60;font-weight:600;}
.dt-row .v{font-weight:700;}
.dt-row.tot{border-bottom:0;margin-top:6px;padding-top:14px;border-top:2px solid #2d2f6b;}
.dt-row.tot .k{font-weight:800;}
.dt-row.tot .v{font-weight:900;font-size:18px;color:var(--brand);}
.backlink{display:inline-block;color:rgba(255,255,255,.85);text-decoration:none;font-weight:700;font-size:14px;margin:2px 2px 14px;}

/* 인쇄/저장 버튼은 PC에서만 (모바일·앱내브라우저는 window.print 미동작) */
@media (max-width:600px){ .print-action{ display:none !important; } }

/* 폼 카드(비번변경/찾기 등) 재사용: .card / .field / .btn 사용 */

/* 인쇄 */
@media print{
  body{background:#fff;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .tabbar,.backlink,.btn,.foot,.brand{display:none !important;}
  .shell{padding:0;max-width:none;}
  .dt-card,.card{box-shadow:none;border:1px solid #ddd;}
}