/* 새 페이지(주보·소식·관리자)가 같이 쓰는 스타일. 기존 index/album과 같은 디자인 토큰 */
:root{
  --paper:#FBFAF7;
  --ink:#21242B;
  --ink-soft:#5A5F6A;
  --ink-faint:#A8ACB5;
  --line:#E5E2DA;
  --blue:#454F85;
  --blue-deep:#2C3457;
  --sand:#F1EBDD;
  --card:#FFFFFF;
  --danger:#A3412F;
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  background:var(--paper);color:var(--ink);
  line-height:1.7;font-size:17px;word-break:keep-all;
  -webkit-font-smoothing:antialiased;
}
.serif{font-family:'Gowun Batang',serif}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--blue);outline-offset:2px;border-radius:4px
}

/* ---------- 휴대폰 메뉴 버튼 ---------- */
.menu-btn{
  display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  width:44px;height:44px;margin-right:-10px;border:none;background:none;cursor:pointer;border-radius:10px;
}
.menu-btn span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s,opacity .2s}
nav.open .menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
nav.open .menu-btn span:nth-child(2){opacity:0}
nav.open .menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (prefers-reduced-motion:reduce){.menu-btn span,.nav-links{transition:none!important}}

/* ---------- nav ---------- */
nav{position:sticky;top:0;z-index:50;background:rgba(251,250,247,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-inner{max-width:1040px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand img{height:50px;width:auto}
.brand span{font-weight:700;font-size:15px;letter-spacing:-.01em}
.nav-links{display:flex;gap:24px;list-style:none}
.nav-links a{text-decoration:none;color:var(--ink-soft);font-size:14px;font-weight:500;transition:color .2s;white-space:nowrap}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--blue)}
.nav-links a[aria-current="page"]{font-weight:700}
@media (max-width:640px){
  /* 휴대폰: 메뉴 버튼(☰)을 누르면 펼쳐지고 접혀요 */
  .nav-inner{flex-wrap:nowrap;padding:12px 22px}
  .brand img{height:38px}
  .menu-btn{display:flex}
  .nav-links{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;gap:0;width:auto;
    background:var(--paper);border-bottom:1px solid var(--line);
    padding:0 26px;box-shadow:0 14px 28px rgba(33,36,43,.08);
    max-height:0;overflow:hidden;visibility:hidden;
    transition:max-height .3s ease,padding .3s ease,visibility 0s linear .3s;
  }
  nav.open .nav-links{max-height:480px;padding:6px 26px 14px;visibility:visible;transition:max-height .3s ease,padding .3s ease}
  .nav-links a{display:block;padding:14px 2px;font-size:16.5px;border-bottom:1px solid var(--line)}
  .nav-links li:last-child a{border-bottom:none}
  .nav-links a[aria-current="page"]{color:var(--blue);font-weight:700}
}

/* ---------- page header ---------- */
.page-head{max-width:1040px;margin:0 auto;padding:64px 24px 24px}
.eyebrow{display:flex;align-items:baseline;gap:10px;font-size:12.5px;letter-spacing:.14em;color:var(--ink-soft);font-weight:600;margin-bottom:18px}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--blue);align-self:center}
.eyebrow .de{color:var(--ink-faint);font-weight:400;letter-spacing:.08em}
h1{font-family:'Gowun Batang',serif;font-weight:700;font-size:clamp(28px,4vw,42px);letter-spacing:-.015em;line-height:1.35}
.sub{margin-top:12px;color:var(--ink-soft);max-width:640px}
main{max-width:1040px;margin:0 auto;padding:24px 24px 72px}

/* ---------- buttons & forms ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font:inherit;font-size:14.5px;font-weight:600;
  padding:9px 18px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  text-decoration:none;transition:border-color .2s,background .2s,color .2s;
}
.btn:hover{border-color:var(--blue);color:var(--blue)}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.primary:hover{background:var(--blue-deep);border-color:var(--blue-deep);color:#fff}
.btn.danger{color:var(--danger)}
.btn.danger:hover{border-color:var(--danger)}
.btn.small{font-size:13px;padding:5px 12px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.link-btn{background:none;border:none;font:inherit;font-size:13px;color:var(--ink-soft);cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:2px}
.link-btn:hover{color:var(--blue)}
.link-btn.danger:hover{color:var(--danger)}

.field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.field > span{font-size:13.5px;font-weight:600;color:var(--ink-soft)}
.field small{font-size:12.5px;color:var(--ink-faint);font-weight:400}
input[type=text],input[type=email],input[type=password],input[type=date],select,textarea{
  font:inherit;font-size:15.5px;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:8px;
  padding:9px 12px;width:100%;
}
textarea{resize:vertical;min-height:70px;line-height:1.6}
input:focus,select:focus,textarea:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px rgba(69,79,133,.15)}
.check{display:inline-flex;align-items:center;gap:8px;font-size:15px;cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--blue)}
.form-error{color:var(--danger);font-size:14px;min-height:1.4em}

/* ---------- notice / empty ---------- */
.notice{background:var(--sand);border-radius:12px;padding:18px 22px;color:var(--ink);font-size:15px}
.notice code{background:#fff;padding:1px 6px;border-radius:4px;font-size:13.5px}
.empty{color:var(--ink-soft);padding:40px 0;text-align:center}

/* ---------- modal ---------- */
.modal-back{position:fixed;inset:0;z-index:90;background:rgba(20,21,26,.5);display:none;align-items:flex-start;justify-content:center;padding:6vh 16px;overflow-y:auto}
.modal-back.open{display:flex}
.modal{background:var(--paper);border-radius:16px;width:100%;max-width:520px;padding:28px 28px 24px;position:relative}
.modal h2{font-family:'Gowun Batang',serif;font-size:22px;margin-bottom:18px}
.modal .close{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;border:none;background:transparent;font-size:22px;cursor:pointer;color:var(--ink-soft)}
.modal .close:hover{background:var(--line)}

/* ---------- toast ---------- */
#toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;pointer-events:none;
  background:var(--ink);color:#fff;font-size:14.5px;padding:10px 20px;border-radius:999px;z-index:200;transition:opacity .25s,transform .25s}
#toast.show{opacity:1;transform:translate(-50%,0)}
#toast.err{background:var(--danger)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:36px 24px;text-align:center;color:var(--ink-soft);font-size:13.5px}
footer img{height:60px;margin-bottom:12px;opacity:.9}
footer .admin-link{display:inline-block;margin-top:8px;color:var(--ink-faint);font-size:12.5px;text-decoration:none}
footer .admin-link:hover{color:var(--blue)}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
}