/* Hallmark · shape: app screen · genre: modern-minimal (inferred) · theme: Dose (blue adaptation) · redesign: full · nav: compact top bar · signature: searchable lost-and-found register · states: empty, full, error · dose: white · axes: light/grotesk-sans/chromatic-blue · contrast: pass · v2.0.0 */
/* critique: preserve the searchable register; bring the school emblem into a calm, blue-led palette */
/* finish-review: in-thread · 0 findings · gap: none · old better: school logo gave specific identity; now restored */
@import url("tokens.css?hallmark=blue");
@import url("base.css?hallmark=blue");
.site-shell{width:min(100%,1280px);margin-inline:auto;padding-inline:clamp(var(--space-lg),4vw,var(--space-2xl))}
.topbar{min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);border-bottom:1px solid var(--color-rule)}
.brand{display:inline-flex;align-items:center;gap:var(--space-xs);color:var(--color-ink);text-decoration:none}
.brand-mark{width:28px;height:31px;object-fit:contain}
.brand-mark-dark{display:none}
html[data-theme="dark"] .brand-mark-light{display:none}
html[data-theme="dark"] .brand-mark-dark{display:block}
.brand-name{font:700 18px/1.15 var(--font-display);letter-spacing:-.035em}
.topbar-tools{display:flex;align-items:center;gap:var(--space-lg);min-width:0}
.topbar-note{color:var(--color-muted);font-size:var(--text-sm)}
.theme-toggle{min-height:36px;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);padding-inline:var(--space-sm);border:1px solid var(--color-rule);border-radius:var(--radius-pill);background:var(--color-paper);color:var(--color-ink-2);font-size:var(--text-sm);transition:background-color var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out)}
.theme-toggle:hover{background:var(--color-paper-2);border-color:var(--color-muted)}
.theme-icon{font-size:16px;line-height:1}
main{min-height:calc(100svh - 148px)}
.board-section{padding-block:clamp(28px,5vw,56px) 48px}
.board-heading{display:flex;justify-content:space-between;align-items:end;gap:var(--space-lg);margin-bottom:32px}
.board-heading h1{margin:0 0 var(--space-xs);font-size:clamp(28px,3vw,38px)}
.board-heading p{max-width:55ch;margin:0;color:var(--color-muted)}
.board-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);min-height:58px;padding-block:var(--space-xs);border-block:1px solid var(--color-rule)}
.tabs{display:flex;align-items:center;gap:var(--space-xs);min-width:0}
.tab{min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);padding-inline:var(--space-sm);border:1px solid transparent;border-radius:var(--radius-pill);background:transparent;color:var(--color-muted);font-size:var(--text-sm);white-space:nowrap;transition:color var(--dur-short) var(--ease-out),background-color var(--dur-short) var(--ease-out)}
.tab:hover{background:var(--color-paper-2);color:var(--color-ink)}
.tab.active{background:transparent;border-bottom:2px solid var(--color-accent);border-radius:0;color:var(--color-ink);font-weight:500}
.tab-icon{display:none}
.tab-count{min-width:1.5em;color:var(--color-muted);font-variant-numeric:tabular-nums;text-align:center}
.board-toolbar-actions{display:flex;align-items:center;gap:var(--space-sm)}
.button{min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);padding-inline:var(--space-md);border:1px solid transparent;border-radius:var(--radius-control);font-size:var(--text-sm);font-weight:500;line-height:1.2;white-space:nowrap;text-decoration:none;transition:transform var(--dur-micro) var(--ease-out),background-color var(--dur-short) var(--ease-out),color var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out)}
.button-primary{background:var(--color-accent);color:var(--color-accent-ink)}
.button-primary:hover{background:var(--color-accent-deep)}
.button:active{transform:translateY(1px)}
.button-primary:disabled{background:var(--color-accent)}
.button-outline{border-color:var(--color-rule);background:var(--color-paper);color:var(--color-ink)}
.button-outline:hover{border-color:var(--color-muted);background:var(--color-paper-2)}
.button-text{background:transparent;color:var(--color-ink-2)}
.button-text:hover{background:var(--color-paper-2)}
.button-danger{border-color:var(--color-error);background:transparent;color:var(--color-error)}
.search-box{width:min(260px,28vw);min-width:190px;min-height:40px;display:flex;align-items:center;gap:var(--space-xs);padding-inline:var(--space-sm);border:1px solid var(--color-rule);border-radius:var(--radius-control);background:var(--color-paper);color:var(--color-muted)}
.search-box>span{font-size:17px;line-height:1}
.search-box input{flex:1;min-width:0;min-height:36px;padding:0;border:0;outline:0;background:transparent;color:var(--color-ink);font-size:var(--text-sm)}
.search-box input::placeholder{color:var(--color-muted);opacity:1}
.search-box input:focus-visible{outline:2px solid var(--color-focus);outline-offset:1px;border-radius:2px}
.search-box kbd{color:var(--color-muted);font:500 var(--text-xs)/1 var(--font-body)}
.board-intro{display:flex;align-items:center;gap:var(--space-sm);padding-block:var(--space-lg) var(--space-md);color:var(--color-muted);font-size:var(--text-sm)}
.board-intro #boardIntroLabel{color:var(--color-ink);font-weight:500}
.intro-rule{width:22px;height:1px;background:var(--color-rule)}
.post-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-sm)}
.post-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-md);min-width:0;padding:var(--space-sm);border:1px solid var(--color-rule);border-radius:var(--radius-card);background:var(--color-paper)}
.post-open{display:grid;grid-template-columns:minmax(0,10rem) minmax(0,1fr);gap:var(--space-md);min-width:0;color:inherit;text-decoration:none}
.post-image{position:relative;min-width:0;min-height:132px;overflow:hidden;border-radius:10px;background:var(--color-photo-ground)}
.post-image img{display:block;width:100%;height:100%;min-height:132px;object-fit:cover}
.post-image.is-resolved::after{position:absolute;inset:0;z-index:1;background:var(--color-ink);opacity:.38;content:""}
.post-placeholder{position:absolute;inset:0;display:grid;place-items:center;background:var(--color-paper-2);color:var(--color-muted)}
.post-placeholder::after{content:"사진 없음";font-size:var(--text-xs)}
.post-resolved-banner{position:absolute;z-index:2;top:50%;left:50%;padding:var(--space-xs) var(--space-sm);transform:translate(-50%,-50%);border-radius:var(--radius-pill);background:var(--color-accent-soft);color:var(--color-ink);font-size:var(--text-xs);font-weight:500;white-space:nowrap}
.post-type{position:absolute;z-index:3;top:8px;left:8px;min-height:26px;display:inline-flex;align-items:center;padding-inline:var(--space-xs);border-radius:var(--radius-pill);background:var(--color-paper);color:var(--color-ink);font-size:var(--text-xs);font-weight:500}
.post-type.found{background:var(--color-neutral-chip)}
.post-body{min-width:0;display:flex;flex-direction:column;justify-content:center;padding-block:var(--space-3xs)}
.post-title-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-sm);min-width:0}
.post-title{min-width:0;margin:0;overflow-wrap:break-word;font-size:var(--text-lg)}
.post-date{flex:0 0 auto;color:var(--color-muted);font-size:var(--text-xs);font-variant-numeric:tabular-nums;white-space:nowrap}
.post-desc{max-width:70ch;margin:var(--space-xs) 0 var(--space-sm);color:var(--color-ink-2);font-size:var(--text-sm)}
.post-meta{display:flex;flex-wrap:wrap;gap:var(--space-xs) var(--space-md);padding-block:var(--space-sm);border-top:1px solid var(--color-rule)}
.meta-line{display:flex;gap:var(--space-xs);min-width:0;color:var(--color-muted);font-size:var(--text-xs)}
.meta-line span{flex:0 0 auto;white-space:nowrap}
.meta-line b{min-width:0;overflow:hidden;color:var(--color-ink);font-weight:500;text-overflow:ellipsis;white-space:nowrap}
.post-author{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);margin-top:var(--space-2xs);color:var(--color-muted);font-size:var(--text-xs)}
.author-name{display:inline-flex;align-items:center;gap:var(--space-xs);min-width:0;color:var(--color-ink-2)}
.author-avatar{width:24px;height:24px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;background:var(--color-paper-3);color:var(--color-ink);font-size:var(--text-xs);font-weight:500}
.post-comment-count{color:var(--color-muted);white-space:nowrap}
.post-actions{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:var(--space-2xs);min-width:98px;padding-inline-start:var(--space-sm);border-inline-start:1px solid var(--color-rule)}
.post-actions button{min-height:32px;padding:var(--space-2xs) var(--space-xs);border:0;border-radius:7px;background:transparent;color:var(--color-muted);font-size:var(--text-xs);text-align:center;white-space:nowrap;transition:background-color var(--dur-short) var(--ease-out),color var(--dur-short) var(--ease-out)}
.post-actions button:hover{background:var(--color-paper-2);color:var(--color-ink)}
.post-actions button[data-action="resolve"]{color:var(--color-ink);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.post-actions button[data-action="resolve"]:hover{background:transparent;color:var(--color-accent)}
.post-actions button:active{transform:translateY(1px)}
.empty-state{max-width:760px;margin:32px auto;padding:clamp(var(--space-lg),5vw,52px);border-radius:var(--radius-card);background:var(--color-paper-2);text-align:left}

.empty-state h2{margin:0 0 var(--space-sm);font-size:var(--text-xl)}
.empty-state>p{max-width:50ch;margin:0 0 var(--space-lg);color:var(--color-ink-2)}
.site-footer{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);border-top:1px solid var(--color-rule);color:var(--color-muted);font-size:var(--text-xs)}
.footer-brand .brand-name{font-size:var(--text-sm)}
.footer-copyright{color:var(--color-muted);text-decoration:none;white-space:nowrap}
.footer-copyright:hover{color:var(--color-ink);text-decoration:underline;text-underline-offset:3px}
@media(max-width:760px){.site-shell{padding-inline:var(--space-lg)}.board-toolbar{align-items:stretch;flex-direction:column;padding-block:var(--space-sm)}.board-toolbar-actions{display:grid;grid-template-columns:auto minmax(0,1fr)}.search-box{width:auto;min-width:0}.post-open{grid-template-columns:minmax(0,8rem) minmax(0,1fr)}}
@media(max-width:560px){.topbar{min-height:62px;gap:var(--space-sm)}.topbar-tools{gap:var(--space-xs)}.topbar-note{display:none}.board-heading{margin-bottom:var(--space-lg)}.board-heading h1{font-size:28px}.tab{min-height:38px;padding-inline:var(--space-xs);font-size:var(--text-xs)}.board-toolbar-actions{grid-template-columns:minmax(0,1fr)}.board-create{width:100%}.post-card{grid-template-columns:minmax(0,1fr);gap:var(--space-sm)}.post-open{grid-template-columns:minmax(0,7rem) minmax(0,1fr);gap:var(--space-sm)}.post-image,.post-image img{min-height:116px}.post-title-row{display:block}.post-date{display:block;padding-top:var(--space-2xs)}.post-desc{margin-block:var(--space-xs) var(--space-xs)}.post-meta{gap:var(--space-xs) var(--space-sm);padding-block:var(--space-xs)}.post-actions{flex-direction:row;justify-content:flex-end;gap:var(--space-2xs);min-width:0;padding:var(--space-xs) 0 0;border-inline-start:0;border-top:1px solid var(--color-rule)}.post-actions button{min-height:36px}.site-footer{flex-wrap:wrap;padding-block:var(--space-md)}.site-footer>span:nth-child(2){order:3;width:100%}.footer-copyright{margin-inline-start:auto}}
@media(max-width:380px){.site-shell{padding-inline:var(--space-md)}.post-open{grid-template-columns:minmax(0,5rem) minmax(0,1fr);gap:var(--space-sm)}.post-image,.post-image img{min-height:104px}.post-meta{display:grid}}