@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Noto+Sans+KR:wght@400;500;600;700&display=swap');

:root { --ink:#171815; --muted:#73756d; --line:#dedfd8; --paper:#f5f5f0; --white:#fff; --accent:#d9ff43; font-family:"DM Sans","Noto Sans KR",sans-serif; color:var(--ink); background:var(--paper); font-synthesis:none; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; }
button,input,textarea { font:inherit; }
button { color:inherit; }
.site-header { height:74px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(20px,4vw,64px); border-bottom:1px solid var(--line); position:relative; z-index:2; }
.brand { display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none; font-size:15px; font-weight:700; letter-spacing:-.02em; }
.brand-mark { width:15px; height:15px; background:var(--ink); border-radius:50% 50% 8% 50%; transform:rotate(-45deg); }
.quiet-button { border:1px solid #cfd0c9; background:transparent; border-radius:999px; height:39px; padding:0 15px; display:flex; align-items:center; gap:8px; cursor:pointer; font-size:13px; font-weight:600; }
.quiet-button:hover { background:var(--white); border-color:#aaa; }
.quiet-button svg,.search svg { width:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.header-note { color:var(--muted); font-size:10px; letter-spacing:.16em; }
main { padding:0 clamp(20px,4vw,64px) 100px; }
.intro { padding:clamp(70px,10vw,142px) 0 clamp(76px,10vw,130px); max-width:1100px; }
.eyebrow { margin:0 0 24px; font-size:11px; font-weight:600; letter-spacing:.14em; }
.intro h1 { font-size:clamp(54px,8.3vw,126px); line-height:.94; letter-spacing:-.07em; margin:0; font-weight:500; }
.intro-copy { margin:34px 0 0; color:var(--muted); font-size:clamp(15px,1.3vw,18px); line-height:1.7; }
.library { border-top:1px solid var(--ink); padding-top:21px; }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:34px; }
.section-head h2 { font-size:14px; margin:0; font-weight:600; }
.section-head h2 span { color:var(--muted); font-weight:400; margin-left:4px; }
.search { width:min(250px,45vw); display:flex; align-items:center; border-bottom:1px solid #bfc0b9; gap:8px; padding:7px 0; color:var(--muted); }
.search input { border:0; outline:0; background:transparent; width:100%; color:var(--ink); font-size:13px; }
.report-grid { display:grid; grid-template-columns:repeat(12,1fr); column-gap:clamp(16px,2vw,30px); row-gap:62px; }
.report-card { grid-column:span 4; min-width:0; cursor:pointer; border:0; background:none; padding:0; text-align:left; }
.report-card:nth-child(5n + 1),.report-card:nth-child(5n + 2) { grid-column:span 6; }
.preview { position:relative; aspect-ratio:16/10; background:#ddd; overflow:hidden; margin-bottom:18px; }
.preview iframe { border:0; width:1280px; height:800px; transform-origin:top left; transform:scale(var(--preview-scale,.3)); pointer-events:none; background:white; }
.preview::after { content:"열어보기 ↗"; position:absolute; inset:auto 12px 12px auto; padding:8px 11px; border-radius:999px; background:rgba(15,15,13,.82); color:white; font-size:11px; opacity:0; transform:translateY(4px); transition:.2s; }
.report-card:hover .preview::after,.report-card:focus-visible .preview::after { opacity:1; transform:none; }
.report-card:hover .preview iframe { filter:brightness(.96); }
.card-meta { display:flex; justify-content:space-between; gap:12px; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.report-card h3 { font-size:clamp(19px,2vw,28px); line-height:1.25; letter-spacing:-.035em; margin:9px 0 8px; font-weight:600; }
.report-card .description { color:var(--muted); font-size:13px; line-height:1.55; margin:0; max-width:42rem; }
.empty-state { text-align:center; padding:100px 20px; color:var(--muted); }
.empty-state button,.text-button,.viewer-actions button { border:0; background:none; text-decoration:underline; cursor:pointer; }
.loading,.load-error { grid-column:1/-1; padding:80px 0; color:var(--muted); }
.load-error strong { color:var(--ink); font-size:20px; }.load-error button { border:1px solid var(--line); border-radius:999px; background:white; padding:9px 14px; cursor:pointer; }
footer { border-top:1px solid var(--line); padding:28px clamp(20px,4vw,64px) 48px; display:flex; justify-content:space-between; color:var(--muted); font-size:11px; letter-spacing:.08em; }
footer p { margin:0; letter-spacing:0; }
dialog { padding:0; border:0; }
dialog::backdrop { background:rgba(15,16,13,.6); backdrop-filter:blur(6px); }
.add-dialog { width:min(760px,calc(100% - 32px)); border-radius:16px; background:#fbfbf7; box-shadow:0 28px 90px #0004; }
.add-dialog form { padding:30px; }
.dialog-head { display:flex; justify-content:space-between; align-items:flex-start; }
.dialog-head .eyebrow { margin-bottom:8px; }
.dialog-head h2 { margin:0; font-size:28px; letter-spacing:-.04em; }
.icon-button { border:0; background:transparent; font-size:28px; line-height:1; cursor:pointer; width:38px; height:38px; border-radius:50%; }
.icon-button:hover { background:#e9e9e3; }
.form-help { font-size:13px; line-height:1.6; color:var(--muted); max-width:610px; margin:20px 0; }
.add-dialog label { display:grid; gap:8px; font-size:12px; font-weight:600; }
.add-dialog label span { color:var(--muted); font-weight:400; }
textarea,input { border:1px solid #d3d4cc; border-radius:7px; background:white; outline:none; }
textarea:focus,input:focus { border-color:#777; box-shadow:0 0 0 3px #17181510; }
textarea { min-height:260px; resize:vertical; padding:13px; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:12px; line-height:1.5; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }
.form-grid input { height:43px; padding:0 12px; font-size:13px; }
.dialog-actions { display:flex; justify-content:flex-end; align-items:center; gap:18px; margin-top:24px; }
.primary-button { height:43px; padding:0 18px; border-radius:999px; background:var(--ink); color:white; border:0; font-weight:600; cursor:pointer; }
.viewer { width:100vw; max-width:none; height:100vh; max-height:none; background:white; }
.viewer[open] { display:grid; grid-template-rows:58px 1fr; }
.viewer-bar { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #e5e5df; padding:0 16px 0 22px; min-width:0; }
.viewer-title { display:flex; align-items:center; gap:12px; min-width:0; }
.viewer-title span { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.viewer-title strong { font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.viewer-actions { display:flex; align-items:center; gap:8px; }
.viewer-actions button:not(.icon-button) { font-size:11px; color:#a42a20; }
.viewer iframe { width:100%; height:100%; border:0; background:white; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
body:has(dialog[open]) { overflow:hidden; }
@media (max-width:760px) { .site-header{height:64px}.intro{padding-top:76px}.intro h1{font-size:clamp(46px,15vw,78px)}.report-grid{row-gap:44px}.report-card,.report-card:nth-child(n){grid-column:span 12}.section-head{align-items:flex-end}.search{width:48vw}.form-grid{grid-template-columns:1fr}.add-dialog form{padding:22px}footer p{display:none}.viewer-title span{display:none} }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }

.admin-page { background:#eeeeea; }.admin-main { max-width:1400px; margin:auto; }.admin-intro { padding:70px 0 45px; }.admin-intro h1 { font-size:clamp(44px,6vw,82px); letter-spacing:-.06em; margin:0 0 16px; }.admin-intro>p:last-child { color:var(--muted); }.admin-panel { background:#fafaf7; border:1px solid var(--line); border-radius:12px; padding:24px; }.auth-row { display:flex; gap:12px; align-items:end; }.auth-row label { flex:1; max-width:460px; }.admin-page label { display:grid; gap:8px; font-size:12px; font-weight:600; }.admin-page label span { color:var(--muted); font-weight:400; }.admin-page input { height:43px; padding:0 12px; }.status { font-size:12px; color:var(--muted); margin:13px 0 0; }.admin-layout { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr); gap:20px; margin-top:20px; }.report-form { display:grid; gap:18px; }.report-form h2,.panel-heading h2 { margin:0; font-size:25px; letter-spacing:-.04em; }.report-form .eyebrow,.panel-heading .eyebrow { margin-bottom:7px; }.report-form textarea { min-height:330px; }.report-form>.primary-button { justify-self:start; }.panel-heading { display:flex; justify-content:space-between; align-items:start; }.admin-list { margin-top:20px; border-top:1px solid var(--line); }.admin-list article { display:flex; justify-content:space-between; gap:15px; align-items:center; padding:16px 0; border-bottom:1px solid var(--line); }.admin-list article div { display:grid; gap:4px; }.admin-list span,.admin-list small { color:var(--muted); font-size:10px; }.admin-list strong { font-size:14px; }.admin-list article button { border:0; background:none; color:#9b271e; text-decoration:underline; font-size:11px; cursor:pointer; }
@media(max-width:850px){.admin-layout{grid-template-columns:1fr}.auth-row{align-items:stretch;flex-direction:column}.auth-row label{max-width:none}.admin-main{padding-left:20px;padding-right:20px}}