/* Public site: home, login, sign-up and my page. Same tone as the admin screens. */
:root{--ink:#1f2b3d;--muted:#66758a;--line:#e2e7ef;--accent:#3963a5;--accent-deep:#2e528c;--accent-soft:#e9eff8;--paper:#f4f6f9;--card:#fff;
  --danger:#a44848;--danger-soft:#fff4f3;--danger-line:#f0d8d6;--ok:#2f6b4f;--ok-soft:#eef7f1;
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;color:var(--ink);background:var(--paper);
  -webkit-text-size-adjust:100%}
@media (prefers-color-scheme:dark){:root{--ink:#e8edf5;--muted:#9aa7ba;--line:#2c3646;--accent:#7ea6ea;--accent-deep:#a3c0f2;--accent-soft:#1e2a3d;--paper:#141a23;--card:#1c2430;
  --danger:#f0a0a0;--danger-soft:#2d1f22;--danger-line:#4a2c30;--ok:#8fd3ad;--ok-soft:#1b2b24}}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--paper);line-height:1.5}
a{color:var(--accent)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid #79a7f0;outline-offset:2px}
[hidden]{display:none!important}

/* Header */
.site-header{height:72px;padding:0 max(16px,calc((100vw - 1120px)/2));background:var(--card);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:760;letter-spacing:-.2px;color:inherit;text-decoration:none;flex:none}
.brand-icon{width:34px;height:34px;border-radius:9px;background:#3963a5;color:#fff;display:grid;place-items:center}
.brand-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}
.site-nav{display:flex;align-items:center;gap:4px;min-width:0}
.site-nav a,.site-nav button{display:inline-flex;align-items:center;height:38px;padding:0 12px;border-radius:8px;border:0;background:none;color:var(--ink);font:inherit;font-size:14px;font-weight:600;text-decoration:none;cursor:pointer;white-space:nowrap}
.site-nav a:hover,.site-nav button:hover{background:var(--paper)}
.site-nav .nav-primary{background:var(--accent);color:#fff}
.site-nav .nav-primary:hover{background:var(--accent-deep)}
@media (prefers-color-scheme:dark){.site-nav .nav-primary{color:#10161f}}

/* Home hero: a blue page whose lower right corner is turned like a leaf of the book */
.hero{--fold:56px;position:relative;background:#3963a5;color:#fff;padding:64px max(16px,calc((100vw - 1120px)/2)) 76px}
.hero::after{content:"";position:absolute;right:0;bottom:0;width:var(--fold);height:var(--fold);
  background:linear-gradient(to top left,var(--paper) 50%,#c9d8ef 50%);filter:drop-shadow(-2px -2px 3px #0f224233)}
.hero h1{margin:0;max-width:15em;font-size:clamp(30px,6.4vw,56px);line-height:1.18;letter-spacing:-1.6px;font-weight:780;word-break:keep-all}
.hero p{margin:18px 0 0;max-width:34em;font-size:clamp(15px,2.2vw,18px);line-height:1.7;color:#dde7f6;word-break:keep-all}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.hero-actions a{display:inline-flex;align-items:center;height:48px;padding:0 22px;border-radius:8px;font-size:15px;font-weight:680;text-decoration:none}
.hero-primary{background:#fff;color:#2b4f8a}
.hero-primary:hover{background:#eef3fb}
.hero-secondary{color:#fff;border:1px solid #ffffff66}
.hero-secondary:hover{background:#ffffff14}
@media (prefers-color-scheme:dark){.hero{background:#24426f}.hero::after{background:linear-gradient(to top left,var(--paper) 50%,#3d5a86 50%)}}

/* Library on the home page */
.shelf{padding:40px max(16px,calc((100vw - 1120px)/2)) 64px;flex:1}
.shelf-head{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:flex-end;justify-content:space-between;margin-bottom:22px}
.shelf-head h2{margin:0;font-size:24px;letter-spacing:-.6px}
.library-count{margin:4px 0 0;color:var(--muted);font-size:13px}
.library-search input{width:min(320px,calc(100vw - 32px));height:42px;border:1px solid var(--line);border-radius:8px;padding:0 14px;font:inherit;font-size:14px;color:var(--ink);background:var(--card)}
.library-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:28px 22px}
.library-book{display:flex;flex-direction:column;gap:9px;color:inherit;text-decoration:none;border-radius:8px}
.library-cover{display:grid;place-items:center;width:100%;background:var(--card);border:1px solid var(--line);border-radius:6px;overflow:hidden;box-shadow:0 6px 18px #1b2a4114}
.library-cover img{width:100%;height:100%;object-fit:contain;display:block}
.library-locked{font-size:34px;opacity:.6}
.library-book strong{font-size:15px;line-height:1.4;word-break:keep-all;overflow-wrap:anywhere}
.library-book:hover strong{color:var(--accent)}
.library-meta{color:var(--muted);font-size:12px}
.library-empty{color:var(--muted);font-size:14px;list-style:none}

/* Forms: login, sign-up, my page */
.form-main{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:48px 16px 64px}
.card{width:100%;max-width:420px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 3px 12px #273b5608;padding:34px 32px 30px}
.card h1{font-size:24px;letter-spacing:-.8px;margin:0 0 8px;font-weight:740}
.intro{font-size:14px;color:var(--muted);margin:0 0 24px;line-height:1.7}
.field{margin-bottom:16px}
.field label,.label{display:block;font-size:13px;font-weight:650;margin:0 0 7px}
.field input{width:100%;height:46px;border:1px solid var(--line);border-radius:6px;padding:0 13px;font:inherit;font-size:15px;color:var(--ink);background:var(--card)}
.field input:focus-visible{outline:3px solid #79a7f0;outline-offset:1px}
.hint{margin:6px 0 0;font-size:12px;color:var(--muted)}
.optional{font-weight:500;color:var(--muted)}
.button{display:inline-flex;align-items:center;justify-content:center;width:100%;height:48px;border:0;border-radius:6px;background:var(--accent);color:#fff;font:inherit;font-size:15px;font-weight:680;cursor:pointer;text-decoration:none}
.button:hover{background:var(--accent-deep)}
.button:disabled{opacity:.6;cursor:progress}
.button-quiet{background:var(--card);color:var(--ink);border:1px solid var(--line)}
.button-quiet:hover{background:var(--paper)}
.button-danger{background:var(--danger)}
.button-danger:hover{background:#8c3a3a}
@media (prefers-color-scheme:dark){.button{color:#10161f}.button-quiet{color:var(--ink)}}
.message{padding:11px 13px;font-size:13px;line-height:1.6;border-radius:6px;margin:0 0 18px}
.message-error{color:var(--danger);background:var(--danger-soft);border:1px solid var(--danger-line)}
.message-ok{color:var(--ok);background:var(--ok-soft);border:1px solid #cfe6d8}
.foot{margin:22px 0 0;text-align:center;font-size:13px;color:var(--muted)}
.foot a{font-weight:650;text-decoration:none}

/* Consents */
.consents{border:1px solid var(--line);border-radius:8px;margin:6px 0 20px;padding:0;min-width:0}
.consent{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-top:1px solid var(--line)}
.consent:first-child{border-top:0}
.consent-all{background:var(--paper);border-radius:8px 8px 0 0;font-weight:700}
.consent input{width:18px;height:18px;margin:2px 0 0;flex:none;accent-color:var(--accent)}
.consent-body{flex:1;min-width:0;font-size:14px}
.consent details{margin-top:6px}
.consent summary{font-size:12px;color:var(--muted);cursor:pointer;width:max-content}
.terms-text{margin:8px 0 0;max-height:160px;overflow:auto;padding:10px 12px;border-radius:6px;background:var(--paper);font-size:12px;line-height:1.7;color:var(--muted)}
.terms-text p{margin:0 0 6px}
.draft-mark{display:inline-block;margin-bottom:6px;padding:1px 7px;border-radius:4px;background:#fff1d6;color:#7a5410;font-size:11px;font-weight:700}
@media (prefers-color-scheme:dark){.draft-mark{background:#3a2f17;color:#f2cf8a}}

/* My page */
.page{width:100%;max-width:720px;margin:0 auto;padding:40px 16px 64px;flex:1}
.page > h1{font-size:28px;letter-spacing:-.8px;margin:0 0 24px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:24px;margin-bottom:16px}
.panel h2{margin:0 0 16px;font-size:18px;letter-spacing:-.4px}
.panel-lead{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.panel-lead h2{margin:0 0 4px}
.panel-lead p{margin:0;color:var(--muted);font-size:14px}
.panel-lead .button{width:auto;padding:0 20px}
.facts{display:grid;grid-template-columns:max-content 1fr;gap:10px 20px;margin:0;font-size:14px}
.facts dt{color:var(--muted)}
.facts dd{margin:0;overflow-wrap:anywhere}
.panel form{max-width:380px}
.panel .button{width:auto;padding:0 22px}
.notice{border-color:#e7c98d;background:#fffaf0}
@media (prefers-color-scheme:dark){.notice{border-color:#5a4824;background:#241f14}}
.notice p{margin:0;font-size:14px;line-height:1.7}
.danger-zone summary{cursor:pointer;font-size:15px;font-weight:700;color:var(--danger)}
.danger-zone p{font-size:14px;color:var(--muted);line-height:1.7}
.check{display:flex;gap:8px;align-items:flex-start;font-size:14px;margin:0 0 16px}
.check input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--danger)}

.rows{list-style:none;margin:12px 0 0;padding:0;font-size:14px}
.rows li{display:flex;flex-wrap:wrap;gap:2px 14px;padding:9px 0;border-top:1px solid var(--line)}
.rows .row-name{flex:1 1 140px;overflow-wrap:anywhere}
.rows .row-left{font-weight:700}
.rows .row-date{color:var(--muted)}
.balance{margin:0 0 12px;font-size:24px}
#attend-message{margin-top:12px}

.site-footer{padding:22px max(16px,calc((100vw - 1120px)/2));border-top:1px solid var(--line);font-size:12px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 18px}
.site-footer a{color:inherit}

@media (max-width:600px){
  .site-header{height:60px}
  .brand{font-size:15px;gap:8px}.brand-icon{width:30px;height:30px}
  .site-nav a,.site-nav button{padding:0 8px;font-size:13px}
  .hero{--fold:40px;padding-top:44px;padding-bottom:64px}
  .shelf-head > *,.library-search,.library-search input{width:100%}
  .hero-actions a{flex:1 1 auto;justify-content:center}
  .library-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px}
  .card{padding:26px 20px 22px;border-radius:12px}
  .form-main{padding-top:24px}
  .panel{padding:20px 18px}
  .facts{grid-template-columns:1fr;gap:2px}.facts dd{margin-bottom:10px}
}
@media (max-width:480px){.site-nav .nav-optional{display:none}}
@media (max-width:420px){.signed-in .brand-name{display:none}}