@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200;300;400;500;600;700;900&display=swap");

:root{
  --paper:#fff;
  --ink:#111;
  --line:rgba(0,0,0,.22);
  --muted:rgba(0,0,0,.58);
  --serif:"Noto Serif KR",Georgia,"Times New Roman",serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --archive-poem-size:58px;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--paper);color:var(--ink)}
body{font-family:var(--serif);overflow:auto}
a{color:inherit}
button,input{font:inherit}

.archive-back{
  position:fixed;
  top:18px;
  left:20px;
  z-index:20;
  display:block;
  width:auto;
  height:auto;
  padding:0;
  border:0;
  background:transparent;
  text-decoration:none;
  font-family:var(--mono);
  font-size:18px;
  line-height:1;
}
.archive-lang{
  position:fixed;
  top:20px;
  right:22px;
  z-index:20;
  display:flex;
  gap:9px;
  padding:5px 7px;
  background:var(--paper);
  font-family:var(--mono);
  font-size:10px;
  text-transform:uppercase;
}
.archive-lang a{text-decoration:none;opacity:.42}
.archive-lang a[aria-current="page"]{opacity:1;text-decoration:underline;text-underline-offset:3px}

.archive-shell{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:56px clamp(24px,6vw,92px) 38px;
}
.archive-focus{
  width:min(1120px,100%);
  min-height:min(780px,calc(100vh - 94px));
  display:grid;
  grid-template-rows:
    18px
    18px
    26px
    clamp(240px,38vh,360px)
    50px
    58px
    52px
    minmax(58px,110px)
    16px;
  gap:5px;
  align-content:center;
}
.archive-label,
.archive-theme,
.archive-source,
.archive-tools,
.archive-document,
.archive-foot{
  font-family:var(--mono);
}
.archive-label{
  font-size:10px;
  letter-spacing:.04em;
  text-transform:uppercase;
  opacity:.62;
}
.archive-theme{
  font-size:9px;
  letter-spacing:.05em;
  text-transform:uppercase;
  opacity:.48;
}
.archive-title{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:16px;
  line-height:1.25;
  font-weight:400;
}

/* A single fixed slot. Every entry uses exactly the same box and type size. */
.archive-poem{
  width:100%;
  height:100%;
  min-width:0;
  margin:0;
  padding:10px clamp(6px,2.2vw,28px);
  display:grid;
  grid-template-rows:repeat(4,minmax(0,1fr));
  align-items:center;
  overflow:hidden;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  font-family:var(--serif);
  font-size:var(--archive-poem-size);
  font-weight:400;
  line-height:1;
  letter-spacing:-.035em;
  text-align:center;
}
.archive-poem span{
  width:100%;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  hyphens:none;
  word-break:normal;
  overflow-wrap:normal;
}
.archive-source,
.archive-translation{
  min-width:0;
  overflow:auto;
  padding-top:7px;
  font-size:10px;
  line-height:1.55;
}
.archive-source{font-family:var(--mono)}
.archive-source a{text-decoration:underline;text-underline-offset:3px}
.archive-translation{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:2px;
  font-family:var(--serif);
  font-size:12px;
}
.archive-translation span{display:block}
.archive-original-note{font-family:var(--mono);font-size:9px;opacity:.54}

.archive-tools{
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  gap:10px;
  align-items:stretch;
}
.archive-tools button,
.archive-tools input{
  width:100%;
  height:54px;
  border:1px solid var(--ink);
  border-radius:0;
  outline:none;
}
.archive-tools button{
  padding:0 14px;
  background:var(--ink);
  color:var(--paper);
  cursor:pointer;
}
.archive-tools input{
  padding:0 15px;
  background:var(--paper);
  color:var(--ink);
}
.archive-tools input:focus{outline:2px solid var(--ink);outline-offset:2px}

.search-results{
  min-height:0;
  overflow:auto;
  border-top:1px solid var(--line);
}
.search-result{
  width:100%;
  display:grid;
  grid-template-columns:52px minmax(0,1fr);
  gap:10px;
  padding:9px 4px;
  border:0;
  border-bottom:1px solid rgba(0,0,0,.12);
  background:transparent;
  color:inherit;
  text-align:left;
  cursor:pointer;
}
.search-index{font-family:var(--mono);font-size:9px;opacity:.55}
.search-result-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.search-title{font-size:11px;font-weight:400}
.search-lines{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-theme{font-family:var(--mono);font-size:8px;text-transform:uppercase;opacity:.45}
.search-empty{padding:12px 4px;font-family:var(--mono);font-size:9px;opacity:.55}
.archive-document{font-size:8px;opacity:.5}
.archive-document a{text-decoration:underline;text-underline-offset:3px}
.archive-foot{
  position:fixed;
  left:20px;
  bottom:15px;
  z-index:10;
  font-size:8px;
  opacity:.42;
}

@media(max-width:720px){
  .archive-shell{padding:58px 14px 42px}
  .archive-focus{
    min-height:calc(100vh - 100px);
    grid-template-rows:16px 16px 24px clamp(230px,38vh,300px) 64px 72px 50px minmax(66px,105px) 16px;
    gap:5px;
  }
  .archive-poem{padding-inline:2px;letter-spacing:-.045em}
  .archive-tools{grid-template-columns:104px minmax(0,1fr);gap:7px}
  .archive-tools button,.archive-tools input{height:50px;padding-inline:9px}
  .archive-foot{display:none}
}

@media(max-height:680px){
  .archive-shell{place-items:start center;padding-top:54px}
  .archive-focus{min-height:680px;align-content:start}
}


/* V32 — archive navigation typography */
.archive-back,.archive-lang,.archive-lang a,.archive-tools,.archive-tools button,
.archive-tools input,.archive-document,.archive-document a,.archive-foot{
  font-family:"Noto Serif KR",serif!important;
  font-synthesis:none!important;
}