:root{--paper:#f2eee5;--paper-light:#faf7f0;--ink:#112e35;--deep:#0b252b;--muted:#68787b;--gold:#c69546;--mint:#7dc8b9;--line:#173b421f;--white:#fffdf8}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Noto Sans KR",Pretendard,"Malgun Gothic",sans-serif;-webkit-font-smoothing:antialiased}
body.modal-open{overflow:hidden}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
button{cursor:pointer}
.skip{position:fixed;z-index:1000;top:-60px;left:18px;background:#fff;color:#111;padding:12px 18px}.skip:focus{top:12px}
.scroll-progress{position:fixed;z-index:90;top:0;left:0;width:100%;height:3px;background:#ffffff18}.scroll-progress i{display:block;width:0;height:100%;background:var(--gold)}
.site-header{position:absolute;z-index:20;top:0;left:0;right:0;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:30px;padding:26px clamp(22px,5vw,76px);color:#fff;border-bottom:1px solid #ffffff20}
.brand{display:inline-flex;align-items:center;gap:12px;letter-spacing:.13em;font-size:12px}.brand span{display:grid;place-items:center;width:31px;height:31px;border:1px solid;border-radius:50%;font-family:"DM Serif Display",serif;font-size:15px}
.site-header nav{display:flex;justify-content:center;align-items:center;gap:clamp(14px,2vw,30px)}
.site-header nav a{font-size:12px;font-weight:700;white-space:nowrap;opacity:.82;transition:.2s}.site-header nav a:hover,.site-header nav a:focus-visible{opacity:1;color:#f5ca80;outline:none}
.site-header nav .return-link{border:1px solid #ffffff45;padding:9px 12px;opacity:1}
.admin-actions{display:flex;align-items:center;gap:8px}.admin-actions button{border:1px solid #ffffff55;background:transparent;color:#fff;padding:10px 13px;font-size:11px;font-weight:800}.admin-actions button.accent{border-color:#e8bd72;background:#e8bd72;color:#173138}
.hero{position:relative;display:flex;align-items:flex-end;min-height:min(900px,100vh);padding:180px clamp(24px,8vw,130px) 120px;color:#fff;background:radial-gradient(circle at 75% 35%,#23515a 0,#0c2a31 38%,#071a1f 78%);overflow:hidden}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,#0000 55%,#c99a4930),repeating-linear-gradient(90deg,#ffffff08 0 1px,transparent 1px 12.5%);pointer-events:none}
.hero:after{content:"";position:absolute;width:38vw;height:38vw;right:-7vw;top:17%;border:1px solid #caa45c66;border-radius:50%;box-shadow:0 0 0 8vw #ffffff04,0 0 0 16vw #ffffff03}
.hero-index{position:absolute;z-index:1;right:5vw;bottom:8%;color:#ffffff09;font:400 clamp(80px,14vw,220px)/.72 "DM Serif Display",serif;text-align:right;letter-spacing:-.06em}
.hero-copy{position:relative;z-index:2;max-width:920px}.eyebrow{margin:0;color:var(--gold);font-size:11px;font-weight:800;letter-spacing:.22em}.hero h1{margin:24px 0 30px;font-size:clamp(48px,6.3vw,92px);line-height:1.1;letter-spacing:-.055em;word-break:keep-all}.hero h1 em{color:#efc77c;font-family:"DM Serif Display","Noto Sans KR",serif;font-weight:400}.hero-copy>p:last-child{max-width:660px;margin:0;color:#ffffffb8;font-size:16px;line-height:1.9}.scroll-guide{position:absolute;z-index:3;right:clamp(26px,6vw,90px);bottom:70px;display:flex;align-items:center;gap:15px;color:#ffffffa0;font-size:10px;font-weight:800;letter-spacing:.17em;writing-mode:vertical-rl}.scroll-guide i{display:grid;place-items:center;width:34px;height:34px;border:1px solid #ffffff55;border-radius:50%;font-style:normal}
.archive-intro{display:grid;grid-template-columns:1.25fr .75fr;gap:10vw;align-items:end;padding:120px clamp(24px,8vw,130px) 110px}.archive-intro h2{margin:22px 0 0;font-size:clamp(36px,5vw,70px);line-height:1.23;letter-spacing:-.05em}.archive-intro>p{max-width:450px;margin:0;color:var(--muted);line-height:1.9}
.history-feed{position:relative;padding:0 clamp(24px,8vw,130px) 140px}.history-feed:before{content:"";position:absolute;top:0;bottom:80px;left:calc(clamp(24px,8vw,130px) + 84px);width:1px;background:var(--line)}
.history-entry{position:relative;display:grid;grid-template-columns:170px minmax(0,1fr);gap:clamp(30px,6vw,100px);padding:0 0 130px;opacity:0;transform:translateY(35px);transition:opacity .75s,transform .75s}.history-entry.visible{opacity:1;transform:none}
.entry-date{position:sticky;top:110px;align-self:start;padding-top:12px;text-align:right}.entry-date:after{content:"";position:absolute;top:21px;right:-8px;width:15px;height:15px;border:4px solid var(--paper);border-radius:50%;background:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.entry-date strong{display:block;padding-right:28px;font:400 34px/1 "DM Serif Display",serif}.entry-date span{display:block;padding:10px 28px 0 0;color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.14em}
.entry-card{min-width:0}.entry-image{position:relative;background:#cbd1cc;aspect-ratio:16/9;overflow:hidden;box-shadow:0 24px 70px #0f292f1a}.entry-image:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 68%,#071c223d)}.entry-image img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s}.entry-card:hover .entry-image img{transform:scale(1.025)}
.entry-body{position:relative;width:min(850px,92%);margin:-55px 0 0 auto;padding:48px clamp(25px,5vw,70px) 55px;background:var(--paper-light);box-shadow:0 22px 60px #112e3514}.entry-number{color:var(--gold);font:400 15px "DM Serif Display",serif;letter-spacing:.15em}.entry-body h2{margin:18px 0 28px;font-size:clamp(30px,4vw,52px);line-height:1.25;letter-spacing:-.045em;word-break:keep-all}.entry-content{color:#465d62;font-size:16px;line-height:2}.entry-content p{margin:0 0 1.35em}.entry-content p:last-child{margin-bottom:0}.entry-tools{display:flex;gap:8px;margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}.entry-tools button{border:1px solid var(--line);background:transparent;color:var(--ink);padding:10px 16px;font-weight:800}.entry-tools .delete{color:#9a3f36}
.loading,.empty-state{display:grid;place-items:center;min-height:360px;text-align:center;color:var(--muted)}.loading i{width:34px;height:34px;border:2px solid #173a4233;border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite}.empty-state{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.empty-state span{color:var(--gold);font:400 64px "DM Serif Display",serif}.empty-state h2{margin:12px 0;font-size:32px}.empty-state p{margin:0;line-height:1.8}.error-state{padding:60px;text-align:center;color:#983f36}
footer{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;padding:55px clamp(24px,8vw,130px);color:#fff;background:var(--deep)}footer p{margin:0;color:#ffffff8e;font-size:12px;line-height:1.7}footer>a:last-child{color:#efc77c;font-size:12px;font-weight:800}
.modal[hidden]{display:none}.modal{position:fixed;z-index:200;inset:0;display:grid;place-items:center;padding:20px;background:#06171cd9;backdrop-filter:blur(8px)}.dialog{position:relative;width:min(1100px,100%);max-height:calc(100vh - 40px);overflow:auto;background:var(--paper-light);padding:clamp(28px,5vw,64px);box-shadow:0 40px 120px #0009}.dialog.small{width:min(480px,100%)}.dialog h2{margin:12px 0 30px;font-size:clamp(30px,4vw,48px)}.close{position:absolute;top:20px;right:22px;width:40px;height:40px;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:27px}.dialog form{display:grid;gap:20px}.dialog label{display:grid;gap:9px}.dialog label>span{color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.1em}.dialog input,.dialog textarea{width:100%;border:1px solid var(--line);background:#fffdf9;color:var(--ink);padding:14px 15px;outline:none}.dialog input:focus,.dialog textarea:focus{border-color:#277a6d;box-shadow:0 0 0 3px #277a6d18}.dialog textarea{min-height:240px;resize:vertical;line-height:1.8}.submit{min-height:48px;border:0;background:var(--deep);color:#fff;padding:0 24px;font-weight:800}.form-message{min-height:20px;margin:0;color:#a33d34;font-size:13px}.editor-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:38px}.image-field input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}#image-preview{min-height:460px;place-content:center;text-align:center;color:var(--muted);background:#e7e2d7 center/cover no-repeat;border:1px dashed #173a4255;cursor:pointer;overflow:hidden}#image-preview.has-image{color:#fff;text-shadow:0 1px 6px #000;background-color:#173a42}#image-preview small{margin-top:8px;font-size:11px}.text-fields{display:grid;gap:18px}.editor-buttons{display:flex;justify-content:flex-end;gap:9px}.editor-buttons button{min-height:48px;border:1px solid var(--line);background:transparent;padding:0 22px;font-weight:800}.editor-buttons .submit{border-color:var(--deep);background:var(--deep);color:#fff}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:1050px){.site-header{grid-template-columns:auto 1fr}.site-header nav{order:3;grid-column:1/-1;justify-content:flex-start;overflow-x:auto;padding-top:12px}.admin-actions{justify-self:end}.hero{padding-top:220px}.history-entry{grid-template-columns:130px minmax(0,1fr)}.history-feed:before{left:calc(clamp(24px,8vw,130px) + 64px)}.entry-date strong{font-size:27px}.editor-grid{grid-template-columns:1fr}#image-preview{min-height:340px}}
@media(max-width:680px){.site-header{gap:12px;padding:18px}.site-header>.brand b{display:none}.site-header nav{gap:18px}.site-header nav a{font-size:10px}.site-header nav .return-link{padding:7px 9px}.admin-actions button{padding:8px 9px;font-size:10px}.hero{min-height:820px;padding:220px 22px 100px}.hero-index{font-size:90px}.hero h1{font-size:44px}.hero-copy>p:last-child{font-size:14px}.scroll-guide{display:none}.archive-intro{grid-template-columns:1fr;gap:28px;padding:85px 20px 70px}.archive-intro h2{font-size:39px}.history-feed{padding:0 18px 80px}.history-feed:before{left:30px}.history-entry{display:block;padding:0 0 85px}.entry-date{position:relative;top:auto;text-align:left;padding:0 0 18px 28px}.entry-date:after{top:6px;left:5px;right:auto}.entry-date strong,.entry-date span{display:inline;padding:0;font-size:15px}.entry-date span{margin-left:8px}.entry-image{aspect-ratio:4/3}.entry-body{width:calc(100% - 18px);margin:-28px 0 0 auto;padding:30px 22px 35px}.entry-body h2{font-size:30px}.entry-content{font-size:14px}.entry-tools{flex-wrap:wrap}footer{flex-direction:column;align-items:flex-start}.modal{padding:10px}.dialog{max-height:calc(100vh - 20px);padding:34px 20px}.dialog h2{font-size:32px}#image-preview{min-height:260px}.editor-buttons button{flex:1}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Centered archive canvas: the outer edges remain a quiet background. */
body{background:#071b20 radial-gradient(circle at 50% 15%,#17383f 0,#071b20 58%) fixed}
main,footer{width:min(1120px,calc(100% - 96px));margin-left:auto;margin-right:auto}
main{background:var(--paper);box-shadow:0 0 90px #0000003d;overflow:hidden}
.site-header{left:50%;right:auto;width:min(1120px,calc(100% - 96px));transform:translateX(-50%)}
.hero{min-height:min(760px,100vh);padding-left:clamp(40px,6vw,92px);padding-right:clamp(40px,6vw,92px)}
.hero h1{font-size:clamp(46px,5.2vw,76px)}
.archive-intro{padding-left:clamp(40px,6vw,88px);padding-right:clamp(40px,6vw,88px)}
.archive-intro{grid-template-columns:minmax(0,1.6fr) minmax(240px,.6fr);gap:48px}
.archive-intro h2{font-size:clamp(36px,4.2vw,56px);white-space:nowrap}
.history-feed{padding-left:clamp(40px,6vw,88px);padding-right:clamp(40px,6vw,88px)}
.history-feed:before{left:calc(clamp(40px,6vw,88px) + 84px)}
.entry-image{aspect-ratio:auto;background:#0b252b}
.entry-image:after{display:none}
.entry-image img{display:block;width:100%;height:auto;max-height:none;object-fit:contain;transform:none}
.entry-card:hover .entry-image img{transform:none}
#image-preview{background-size:contain;background-repeat:no-repeat;background-position:center}

@media(max-width:1050px){
  main,footer{width:calc(100% - 32px)}
  .site-header{width:calc(100% - 32px)}
}

@media(max-width:900px){
  .archive-intro{grid-template-columns:1fr;gap:28px}
  .archive-intro h2{white-space:normal}
}

@media(max-width:680px){
  body{background:var(--paper)}
  main,footer{width:100%}
  .site-header{left:0;width:100%;transform:none}
  .hero{min-height:820px;padding-left:22px;padding-right:22px}
  .hero h1{font-size:44px}
  .archive-intro{padding-left:20px;padding-right:20px}
  .history-feed{padding-left:18px;padding-right:18px}
  .history-feed:before{left:30px}
}