/* Sub-page + board styles (site.css holds the brand system). */

/* dropdown nav (desktop) */
.nav-links { gap: var(--sp-6); white-space: nowrap; }
.nav-links li { position: relative; }
.nav-links .sub {
  display: none; position: absolute; top: 100%; left: -1em; min-width: 11em; margin: 0;
  padding: var(--sp-3) 0; flex-direction: column; gap: 0; list-style: none;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 16px 34px -20px rgba(32, 29, 79, 0.35);
}
.nav-links li:hover > .sub, .nav-links li:focus-within > .sub { display: flex; }
.nav-links .sub::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav-links .sub a { display: block; padding: 0.55em 1.2em; white-space: nowrap; }
.nav-links .sub a::after { display: none; }
.nav-links > li > a[aria-current] { color: var(--navy); }
.nav-links > li > a[aria-current]::after { width: 100%; }
@media (max-width: 1100px) { .brand small { display: none; } }

/* mobile menu */
.nav-burger { display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; flex-direction: column; justify-content: center; gap: 5px; padding: 10px; }
.nav-burger span { display: block; height: 3px; border-radius: 3px; background: var(--navy); }
.nav-mobile { max-height: calc(100vh - 80px); overflow: auto; background: var(--card); border-top: 1px solid var(--line); padding: var(--sp-3) 4vw var(--sp-6); font-family: var(--font-label); }
.nav-mobile[hidden] { display: none; }
.nav-mobile summary { cursor: pointer; font-weight: 800; padding: var(--sp-3) 0; }
.nav-mobile a { display: block; padding: 0.5em 0 0.5em 1em; color: var(--navy-soft); text-decoration: none; font-weight: 700; }
@media (max-width: 860px) {
  .nav-burger { display: flex; }
  .nav-cta { display: none; }
  .nav-row { gap: var(--sp-3); }
}
@media (min-width: 861px) { .nav-mobile { display: none !important; } }

/* page banner */
.page-banner { padding: calc(var(--nav-h) + var(--sp-16)) 0 0; background: linear-gradient(180deg, var(--blush), var(--cream)); }
.page-banner .crumb { font-family: var(--font-label); font-size: var(--fs-xs); font-weight: 700; color: var(--navy-faint); }
.page-banner .crumb a { text-decoration: none; }
.page-banner h1 { font-size: var(--fs-2xl); margin-top: var(--sp-3); }
.page-banner .lead { margin-top: var(--sp-4); max-width: 46ch; color: var(--navy-soft); }
.subtabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-8); padding-bottom: var(--sp-6); }
.subtabs a { font-family: var(--font-label); font-weight: 800; font-size: var(--fs-xs); text-decoration: none; padding: 0.6em 1.2em; border-radius: 999px; border: 2px solid var(--line-strong); color: var(--navy-soft); transition: background .2s, color .2s; }
.subtabs a:hover { color: var(--navy); border-color: var(--navy); }
.subtabs a[aria-current] { background: var(--navy); border-color: var(--navy); color: var(--cream); }

.page-body { padding: var(--sp-16) 0 var(--sp-32); }
.page-body > .wrap > * + * { margin-top: var(--sp-8); }
.page-body h2 { font-size: var(--fs-lg); }
.prose p + p { margin-top: var(--sp-4); }
.prose { max-width: 62ch; }
.note-box { padding: var(--sp-6) var(--sp-8); border-radius: 22px; background: var(--blue-tint); color: var(--blue-deep); font-size: var(--fs-sm); }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.program-list + .cta-row { margin-top: var(--sp-8); }
.page-body .program .desc ul { margin: var(--sp-3) 0 0; padding-left: 1.2em; }
@media (max-width: 760px) { .program { grid-template-columns: 1fr; gap: var(--sp-4); } }
.contact.page-contact { padding: var(--sp-16) 0 var(--sp-32); }
.contact.page-contact .email-card:first-child { margin-top: 0; }

/* board */
.board-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.board-bar .count { font-family: var(--font-label); font-size: var(--fs-sm); color: var(--navy-soft); }
.post-list { list-style: none; margin: 0; padding: 0; background: var(--card); border-radius: 26px; box-shadow: 0 16px 34px -26px rgba(32, 29, 79, .35); overflow: hidden; }
.post-list li + li { border-top: 1px solid var(--line); }
.post-list a { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-4); align-items: center; padding: var(--sp-6) var(--sp-8); text-decoration: none; transition: background .2s; }
.post-list a:hover { background: var(--blush); }
.post-list .t { font-family: var(--font-label); font-weight: 800; word-break: keep-all; }
.post-list .d { font-family: var(--font-label); font-size: var(--fs-xs); color: var(--navy-faint); white-space: nowrap; }
.post-list .empty { padding: var(--sp-16) var(--sp-8); text-align: center; color: var(--navy-soft); }
.post-view { background: var(--card); border-radius: 26px; padding: var(--sp-12) var(--sp-8); box-shadow: 0 16px 34px -26px rgba(32, 29, 79, .35); }
.post-view h2 { font-size: var(--fs-xl); }
.post-view .meta { margin-top: var(--sp-3); font-family: var(--font-label); font-size: var(--fs-xs); color: var(--navy-faint); padding-bottom: var(--sp-6); border-bottom: 1px solid var(--line); }
.post-view .ext { display: inline-block; margin-top: var(--sp-4); }
.post-body { margin-top: var(--sp-8); line-height: 1.9; overflow-wrap: anywhere; }
.post-body img { max-width: 100%; height: auto; border-radius: 14px; margin: var(--sp-3) 0; display: inline-block; }
.post-body h1, .post-body h2, .post-body h3 { margin: var(--sp-6) 0 var(--sp-3); }
.post-body blockquote { margin: var(--sp-4) 0; padding: var(--sp-3) var(--sp-6); border-left: 4px solid var(--pink); background: var(--pink-tint); border-radius: 0 14px 14px 0; }
.post-body a { color: var(--blue); }
.post-body ul, .post-body ol { padding-left: 1.4em; }
.post-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-8); }
.btn-danger { color: #b3261e; border-color: #b3261e; }

/* editor + login */
.admin-card { background: var(--card); border-radius: 26px; padding: var(--sp-8); box-shadow: 0 16px 34px -26px rgba(32, 29, 79, .35); }
.admin-card .row { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.admin-card label { font-family: var(--font-label); font-weight: 800; font-size: var(--fs-xs); }
.admin-card input[type=text], .admin-card input[type=password], .admin-card input[type=url], .admin-card select { font: inherit; padding: .8em 1em; border: 2px solid var(--line-strong); border-radius: 14px; background: #fff; color: var(--navy); width: 100%; }
.admin-card input:focus, .admin-card select:focus { border-color: var(--blue); outline: none; }
.admin-card .status { font-family: var(--font-label); font-size: var(--fs-sm); color: var(--navy-soft); }
.admin-card .status.err { color: #b3261e; }
#editor { height: 460px; font-size: 1.05rem; background: #fff; border-radius: 0 0 14px 14px; }
.ql-toolbar.ql-snow { border-radius: 14px 14px 0 0; border: 2px solid var(--line-strong); background: var(--blush); position: relative; }
.ql-container.ql-snow { border: 2px solid var(--line-strong); border-top: 0; border-radius: 0 0 14px 14px; }
.emoji-panel { position: absolute; z-index: 20; top: 100%; left: 0; margin-top: 6px; width: min(340px, 90vw); display: none; flex-wrap: wrap; gap: 2px; padding: 10px; background: #fff; border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: 0 16px 34px -16px rgba(32, 29, 79, .4); }
.emoji-panel.open { display: flex; }
.emoji-panel button { width: 34px; height: 34px; font-size: 20px; border: 0; background: transparent; border-radius: 8px; cursor: pointer; }
.emoji-panel button:hover { background: var(--blush); }
.ql-snow .ql-picker.ql-font .ql-picker-label::before, .ql-snow .ql-picker.ql-font .ql-picker-item::before { content: "기본 글꼴"; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=jua]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=jua]::before { content: "주아체"; font-family: "Jua", "Jua Full"; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=gowun]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=gowun]::before { content: "고운돋움"; font-family: "Gowun Dodum", "Gowun Dodum Full"; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=myeongjo]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=myeongjo]::before { content: "나눔명조"; font-family: "Nanum Myeongjo"; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=pen]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=pen]::before { content: "손글씨"; font-family: "Nanum Pen Script"; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=blackhan]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=blackhan]::before { content: "블랙한산스"; font-family: "Black Han Sans"; }
.ql-snow .ql-picker.ql-size .ql-picker-label::before, .ql-snow .ql-picker.ql-size .ql-picker-item::before { content: "보통"; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before { content: "작게"; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before { content: "크게"; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before { content: "아주 크게"; }
.ql-font-jua { font-family: "Jua", "Jua Full", sans-serif; }
.ql-font-gowun { font-family: "Gowun Dodum", "Gowun Dodum Full", sans-serif; }
.ql-font-myeongjo { font-family: "Nanum Myeongjo", serif; }
.ql-font-pen { font-family: "Nanum Pen Script", cursive; font-size: 1.25em; }
.ql-font-blackhan { font-family: "Black Han Sans", sans-serif; }
.ql-size-small { font-size: .8em; } .ql-size-large { font-size: 1.5em; } .ql-size-huge { font-size: 2.2em; }
.ql-align-center { text-align: center; } .ql-align-right { text-align: right; } .ql-align-justify { text-align: justify; }
.ql-indent-1 { padding-left: 3em; } .ql-indent-2 { padding-left: 6em; }
@media (max-width: 620px) { .post-list a { grid-template-columns: 1fr; gap: 4px; padding: var(--sp-4) var(--sp-6); } .post-view { padding: var(--sp-8) var(--sp-6); } }

/* popup (managed from /admin/) */
.popup-back { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(23, 31, 67, .55); }
.popup { width: min(420px, 100%); max-height: 90vh; overflow: auto; background: var(--card); border-radius: 26px; box-shadow: 0 30px 60px -20px rgba(23, 31, 67, .5); }
.popup img { width: 100%; height: auto; display: block; }
.popup-inner { padding: var(--sp-8) var(--sp-8) var(--sp-6); display: grid; gap: var(--sp-4); justify-items: start; }
.popup-inner h2 { font-size: var(--fs-lg); }
.popup-text { white-space: pre-line; color: var(--navy-soft); }
.popup-bar { display: flex; justify-content: space-between; border-top: 1px solid var(--line); }
.popup-bar button { font: inherit; font-family: var(--font-label); font-size: var(--fs-xs); font-weight: 700; padding: var(--sp-4) var(--sp-6); border: 0; background: transparent; color: var(--navy-soft); cursor: pointer; }
.popup-bar button:hover { color: var(--navy); }

/* back office */
.bo-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-8); }
.bo-tabs button { font-family: var(--font-label); font-weight: 800; font-size: var(--fs-xs); padding: .7em 1.4em; border-radius: 999px; border: 2px solid var(--line-strong); background: transparent; color: var(--navy-soft); cursor: pointer; }
.bo-tabs button[aria-selected=true] { background: var(--navy); border-color: var(--navy); color: var(--cream); }
.bo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
@media (max-width: 760px) { .bo-grid { grid-template-columns: 1fr; } }
.admin-card textarea { font: inherit; padding: .8em 1em; border: 2px solid var(--line-strong); border-radius: 14px; width: 100%; resize: vertical; }
.admin-card .check { display: flex; gap: .6em; align-items: center; font-family: var(--font-label); font-weight: 800; }
.admin-card input[type=date] { font: inherit; padding: .7em 1em; border: 2px solid var(--line-strong); border-radius: 14px; width: 100%; }
.admin-card h3 { font-size: var(--fs-md); margin-bottom: var(--sp-4); }
.admin-card .hint { font-size: var(--fs-xs); color: var(--navy-faint); }
.bo-preview { margin-top: var(--sp-4); max-width: 240px; border-radius: 14px; }
.bo-posts { list-style: none; margin: 0; padding: 0; }
.bo-posts li { display: flex; gap: var(--sp-4); align-items: center; justify-content: space-between; padding: var(--sp-3) 0; border-top: 1px solid var(--line); }
.bo-posts a { text-decoration: none; font-family: var(--font-label); font-weight: 700; }

/* board search / pager / pinned */
.board-search { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.board-search input { flex: 1; min-width: 0; font: inherit; padding: .7em 1.1em; border: 2px solid var(--line-strong); border-radius: 999px; background: #fff; color: var(--navy); }
.board-search input:focus { border-color: var(--blue); outline: none; }
.pager { display: flex; justify-content: center; gap: 6px; margin-top: var(--sp-8); flex-wrap: wrap; }
.pager button { min-width: 40px; height: 40px; padding: 0 10px; font-family: var(--font-label); font-weight: 800; border: 2px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--navy-soft); cursor: pointer; }
.pager button:hover:not(:disabled) { border-color: var(--navy); color: var(--navy); }
.pager button[aria-current] { background: var(--navy); border-color: var(--navy); color: var(--cream); }
.pager button:disabled { opacity: .35; cursor: default; }
.pin { display: inline-block; margin-right: .6em; padding: .1em .7em; border-radius: 999px; font-size: var(--fs-2xs); background: var(--pink); color: #fff; vertical-align: middle; }
.board-bar { margin-bottom: var(--sp-4); }

/* custom select (replaces native <select>) */
.ns { position: relative; }
.ns[hidden] { display: none; }
.ns-trigger { width: 100%; text-align: left; font: inherit; padding: .8em 1em; border: 2px solid var(--line-strong); border-radius: 14px; background: #fff; color: var(--navy); display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.ns-trigger::after { content: ""; flex-shrink: 0; width: 9px; height: 9px; border-right: 2px solid var(--navy-soft); border-bottom: 2px solid var(--navy-soft); transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.ns-trigger:hover { border-color: var(--navy-faint); }
.ns.open .ns-trigger, .ns-trigger:focus-visible { border-color: var(--blue); outline: none; box-shadow: 0 0 0 4px var(--blue-tint); }
.ns.open .ns-trigger::after { transform: rotate(225deg) translateY(2px); }
.ns-list { display: none; position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 8px); max-height: 300px; overflow: auto; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 20px 40px -16px rgba(32, 29, 79, .35); }
.ns.open .ns-list { display: block; }
.ns-opt { padding: .7em 1em; border-radius: 10px; cursor: pointer; font-size: var(--fs-sm); color: var(--navy-soft); word-break: keep-all; }
.ns-opt:hover, .ns-opt.is-active { background: var(--blush); color: var(--navy); }
.ns-opt.is-selected { color: var(--pink-deep); font-weight: 700; }
.ns-opt.is-selected::after { content: "✓"; float: right; }
.event .event-banner + .event-banner { margin-top: var(--sp-6); }

/* back office item list */
.bo-items { list-style: none; margin: 0; padding: 0; }
.bo-items li { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; justify-content: space-between; padding: var(--sp-4) 0; border-top: 1px solid var(--line); }
.bo-item-main { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); min-width: 0; }
.bo-item-main b { font-family: var(--font-label); word-break: keep-all; }
.bo-item-main small { color: var(--navy-faint); font-family: var(--font-label); }
.bo-item-btns { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.bo-item-btns .btn { padding: .5em 1.1em; }
.st { font-family: var(--font-label); font-weight: 800; font-size: var(--fs-2xs); padding: .35em .9em; border-radius: 999px; background: var(--line); color: var(--navy-soft); }
.st-live { background: #dff3e4; color: #1d6b34; }
.st-scheduled { background: var(--blue-tint); color: var(--blue-deep); }
.st-ended { background: #f1e4dd; color: #8a5a3c; }
.admin-card .btn-danger { color: #b3261e; border-color: #b3261e; }

/* shown when the Kakao map cannot load */
.map-fallback { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-4); text-align: center; padding: var(--sp-8); background: var(--deep-2); border: 1px solid var(--deep-line); border-radius: 26px; }
.map-fallback p { color: var(--deep-fg); }

/* image tools in the editor */
.ql-editor img { cursor: pointer; max-width: 100%; }
.ql-editor img.img-selected { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 6px; }
.img-tools { position: absolute; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; max-width: calc(100% - 8px); padding: 6px 8px; background: var(--navy); color: var(--cream); border-radius: 14px; box-shadow: 0 14px 30px -12px rgba(23, 31, 67, .6); font-family: var(--font-label); font-size: var(--fs-xs); }
.img-tools[hidden] { display: none; }
.img-tools button { font: inherit; font-weight: 700; padding: .45em .9em; border: 0; border-radius: 999px; background: rgba(255, 243, 236, .12); color: var(--cream); cursor: pointer; }
.img-tools button:hover { background: rgba(255, 243, 236, .28); }
.img-tools button.danger { background: #b3261e; }
.img-tools-label { opacity: .65; padding: 0 4px; }
.img-tools-sep { width: 1px; height: 18px; background: rgba(255, 243, 236, .25); margin: 0 4px; }
.post-body .ql-align-center img, .post-body img[width] { display: inline-block; }

.img-handle { position: absolute; z-index: 31; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--blue); box-shadow: 0 2px 8px rgba(0, 0, 0, .3); touch-action: none; }
.img-handle[hidden] { display: none; }
.img-handle-r { cursor: nwse-resize; }
.img-handle-l { cursor: nesw-resize; }