@import url('fonts/areal.css');
:root{
  --ink:#111; --paper:#fff; --mute:#b4b4b4;
  --sans:"Areal","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --mono:"Areal Mono","Apple SD Gothic Neo","Malgun Gothic",monospace;
  --pad:clamp(16px,4vw,64px);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit;background:none;border:0}
button{cursor:pointer}
a{color:inherit}
/* 한글은 단어 단위로 줄바꿈 */
body{word-break:keep-all;overflow-wrap:break-word}

header{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px var(--pad);font-size:13px;background:var(--paper);z-index:3}
header #home{font-size:13px}
header .lang{display:flex;gap:10px;font-size:12px;letter-spacing:.02em}
header .lang button{color:#999;border-bottom:1px solid transparent}
header .lang button[aria-pressed=true]{color:var(--ink);border-bottom-color:var(--ink)}

/* 입력 */
#start{min-height:100vh;display:flex;flex-direction:column;padding:26vh var(--pad) 12vh}
#start label{font-size:13px;margin-bottom:18px}
#start textarea{display:block;font-size:clamp(36px,7vw,120px);letter-spacing:-.035em;line-height:1.1;width:100%;outline:0;border:0;border-bottom:2px solid var(--ink);padding:0 0 10px;font-weight:500;font-family:inherit;color:inherit;background:none;resize:none;overflow:hidden;word-break:keep-all;overflow-wrap:anywhere}
#start textarea::placeholder{color:var(--mute)}
#start .hint{font-size:13px;color:#777;margin-top:16px}
body.running #start{display:none}
#results{list-style:none;margin-top:10px}
#results li{display:grid;grid-template-columns:3.2ch 1fr auto;gap:0 18px;align-items:baseline;padding:12px 0;border-bottom:1px solid #e6e6e6;cursor:pointer}
#results .n,#results .y,#start .state{font-family:var(--mono);font-size:13px;color:#999}
#results .n{grid-column:1;grid-row:1}
#results .t{grid-column:2;grid-row:1;font-size:clamp(22px,2.6vw,36px);font-weight:500;letter-spacing:-.022em;line-height:1.2}
#results .y{grid-column:3;grid-row:1;white-space:nowrap}
#results .a{grid-column:2;grid-row:2;font-size:14px;margin-top:4px;color:#555}
#results u{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.14em}
#results li.on .t span{background:var(--ink);color:var(--paper);box-shadow:.12em 0 0 var(--ink),-.12em 0 0 var(--ink);-webkit-box-decoration-break:clone;box-decoration-break:clone}
#results li.on .t u{text-decoration-color:transparent}
#start .state{margin-top:14px}

/* 흐름: 모든 문서가 한 문단으로 이어진다 */
#flow{padding:88px var(--pad) 45vh;display:none}
body.running #flow{display:block}
#flow .from{font-size:13px;margin-bottom:3vh}
#stream{font-size:clamp(26px,3.6vw,56px);font-weight:500;letter-spacing:-.022em;line-height:1.36}
.page{transition:color .7s}
.page.past{color:var(--mute)}
/* Link and box share the same footprint: .12em each side (padding, cancelled by negative margin so text stays put),
   so the underline and the filled box line up exactly, left, right and bottom. */
.lk,.title{padding:0 .12em;margin:0 -.12em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.lk{border-bottom:2px solid currentColor;position:relative}
/* 상자의 좌우 여백은 box-shadow로 그려서, 밑줄 → 상자로 바뀔 때 글자가 밀리지 않게 한다 */
/* The box keeps the 2px underline strip (painted in the box colour), so filling doesn't move the bottom edge. */
.title,.lk.on{--box:var(--ink);background:var(--box);color:var(--paper);border-bottom:2px solid var(--box)}
.page.past .title{--box:var(--mute)}
/* 채우기: 흰 막을 difference로 겹쳐 왼쪽에서 오른쪽으로 민다. 다 밀면 실제 상자로 바꾼다 */
.lk.fill::before{content:'';position:absolute;top:0;bottom:-2px;left:0;right:0;background:#fff;mix-blend-mode:difference;transform-origin:left;animation:slide .34s cubic-bezier(.3,.6,.2,1) forwards;pointer-events:none}
@keyframes slide{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* The overlay also covers the underline strip, so there is no seam between box and line (Safari rounds them apart).
   The underline, redrawn as a background, retreats rightward in step with the overlay so the overlay never inverts it to white. */
.lk.fill{border-bottom-color:transparent;background:linear-gradient(var(--ink),var(--ink)) right bottom/100% 2px no-repeat border-box;animation:unline .34s cubic-bezier(.3,.6,.2,1) forwards}
@keyframes unline{to{background-size:0 2px}}
@media (prefers-reduced-motion:reduce){.lk.fill::before{animation:none}.lk.fill{animation:none;background:none}}
/* Jev가 짚은 후보에는 확률이 각주처럼 붙는다 */
[data-p]::after{content:attr(data-p);font-family:var(--mono);font-weight:400;font-size:.36em;letter-spacing:0;vertical-align:super;margin-left:.25em}
.caret{display:inline-block;position:relative;width:.07em;height:.9em;background:var(--ink);vertical-align:-.08em;margin:0 -.11em 0 .04em;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{background:transparent}}
/* 쓰는 주체가 Jev라는 이름표. 커서는 깜빡여도 이름표는 그대로 */
.caret::after{content:'jev';position:absolute;left:.1em;bottom:100%;font:400 11px/1.5 var(--mono);letter-spacing:0;background:var(--ink);color:var(--paper);padding:0 4px;white-space:nowrap}
.note{font-size:.5em;color:#777;font-weight:400;letter-spacing:0}

[data-wiki],[data-href]{cursor:pointer}
/* 링크에 올리면 그 문서의 이미지가 글 위로 올라온다 */
#peek{position:fixed;z-index:4;margin:0;pointer-events:none;width:clamp(180px,22vw,320px)}
#peek img{display:block;width:100%;height:auto;max-height:46vh;object-fit:cover;background:#eee}
#peek figcaption{font-family:var(--mono);font-size:11px;margin-top:6px;color:var(--ink);background:var(--paper);display:inline-block;padding:0 .2em}

/* 도착 */
#end{margin-top:8vh;padding-top:4vh;border-top:2px solid var(--ink)}
#end .lead{font-size:clamp(24px,3vw,46px);font-weight:500;letter-spacing:-.022em;line-height:1.4}
#end .box{border:1.5px solid;padding:0 .16em;font-weight:400}
#end .box.song{background:var(--ink);color:var(--paper);border-color:var(--ink)}
/* 곡: 커버를 크게, 화면 폭을 다 쓰는 2단 */
#end .row{display:grid;grid-template-columns:minmax(0,clamp(200px,30vw,440px)) minmax(0,1fr);gap:clamp(16px,3vw,56px);align-items:end;margin-top:6vh;opacity:0;transition:opacity .5s}
#end .row.on{opacity:1}
#end .cover{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:repeating-linear-gradient(135deg,#ececec 0 6px,#f6f6f6 6px 12px)}
#end .info{display:flex;flex-direction:column;gap:14px;padding-bottom:4px}
#end .row .t{font-size:clamp(36px,6vw,104px);font-weight:500;letter-spacing:-.035em;line-height:.98}
#end .row .s{font-size:clamp(15px,1.4vw,20px)}
#end .act{display:flex;gap:22px;font-size:15px;margin-top:10px}
#end .act button,#end .act a{border-bottom:1px solid;text-decoration:none}
.again{font-size:15px;border-bottom:1px solid}
.retry{display:block;margin-top:5vh;font-size:15px;font-weight:400;letter-spacing:0}
.retry button{border-bottom:1px solid}
@media (max-width:700px){#end .row{grid-template-columns:1fr}}

/* 출처 표기(위키백과 CC BY-SA). 작게, 화면 맨 아래 */
.credit{position:fixed;left:0;right:0;bottom:0;padding:14px var(--pad);font-size:11px;color:#999;line-height:1.6;background:var(--paper)}
/* 여정 중에는 숨긴다: 발췌한 문서마다 원문 링크가 있어 그것이 출처 표기를 대신한다 */
body.running .credit{display:none}
.credit a{color:inherit}