@charset "UTF-8";
@font-face{font-family:LetterPen;src:url('assets/NanumPenScript-Regular.ttf') format('truetype');font-display:swap}
*{box-sizing:border-box}[hidden]{display:none!important}body{word-break:keep-all;overflow-wrap:break-word}button,input,textarea{font:inherit;color:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:default}img{max-width:100%}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #64796a;outline-offset:4px}h1,h2,h3,p{margin:0}.nav{background:rgba(255,255,255,.95);border-bottom:1px solid #eee8dd}.nav .logo img{width:95px;height:32px;object-fit:contain}.nav .menu a{font-size:12px;padding:8px 12px}.skip{position:fixed;left:20px;top:-100px;z-index:100;padding:14px;background:var(--ink);color:white}.skip:focus{top:12px}.showcase-main{max-width:1180px;margin:auto;padding:0 44px}.showcase-hero{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:65px;padding:130px 0 55px;min-height:700px}.hero-copy .eyebrow{margin-bottom:26px}.hero-copy h1{font-size:clamp(48px,5.6vw,74px);line-height:1.13;letter-spacing:-.055em}.hero-lead{font-size:18px;font-weight:700;margin:29px 0 13px}.sub{font-size:14px;color:#75694e;line-height:1.9}.hint{font-size:11px;color:#75694e;line-height:1.8;margin:14px 0}.primary,.secondary{border:1px solid var(--ink);border-radius:999px;min-height:50px;padding:14px 23px;font-weight:650;font-size:14px;display:inline-flex;align-items:center;justify-content:center;text-align:center;background:var(--ink);color:#fff;transition:transform .15s}.primary:hover,.secondary:hover{transform:translateY(-1px)}.secondary{background:#fff;color:var(--ink);border-color:var(--line)}.hero-copy .primary{margin-top:27px;min-width:245px}.hero-door{position:relative;margin:0;justify-self:end;max-width:340px;width:100%}.hero-door img{display:block;width:100%;height:450px;object-fit:cover;border-radius:160px 160px 18px 18px}.hero-door figcaption{position:absolute;bottom:22px;left:0;width:100%;text-align:center;color:white;text-shadow:0 1px 10px #3e3216;font-size:13px;font-weight:700}.journey{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:25px 0;margin-bottom:45px}.journey ol{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);padding:0;margin:0}.journey li{padding:0 22px;border-right:1px solid var(--line)}.journey li:first-child{padding-left:0}.journey li:last-child{border:0}.journey span{font-size:11px;color:#876b70;display:block;margin-bottom:10px}.journey b{font-size:15px;display:block}.journey small{font-size:11px;color:#75694e;display:block;margin-top:8px}.experience{padding:104px 0 45px;max-width:960px;margin:auto;scroll-margin-top:10px}.experience-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-size:12px}.text-button{background:none;border:0;padding:13px 8px;font-size:12px;text-decoration:underline;text-underline-offset:4px;min-height:44px}.progress{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--line);border-radius:15px;margin-bottom:22px;overflow:hidden}.progress button{border:0;background:transparent;min-height:58px;font-size:13px;font-weight:700}.progress small{font-size:10px;margin-right:7px}.progress button[aria-current=step]{background:var(--pink)}.companion{display:flex;align-items:center;justify-content:center;gap:10px;font-size:13px;margin:0 0 20px}.companion img{height:45px;width:45px;object-fit:contain}.survey{display:grid;grid-template-columns:.85fr 1.15fr;border:1px solid var(--line);border-radius:24px;overflow:hidden;min-height:560px}.cinema{position:relative;min-height:100%;background:var(--cream)}.cinema>img,.cinema>video{position:absolute;width:100%;height:100%;object-fit:cover;inset:0}.scene-label{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:#fff;font-size:11px;text-shadow:0 1px 5px #3e3216}.dialogue{padding:40px 32px;align-self:center;min-width:0}.dialogue .eyebrow{font-size:10px;margin-bottom:20px}.speaker{font-size:12px;font-weight:800;color:#85674c;margin-bottom:16px}.dialogue h2{font-size:25px;line-height:1.65;white-space:pre-line;letter-spacing:-.035em;margin-bottom:22px}.dialogue .primary{width:100%;margin-top:16px}.question-meta{display:flex;gap:16px;align-items:center;font-size:12px;margin-bottom:20px}.question-meta progress{height:5px;accent-color:var(--ink);width:100px;flex:1;min-width:0}#answers{display:grid;gap:10px}#answers button{background:#fff;border:1px solid var(--line);border-radius:14px;text-align:left;padding:17px;font-size:14px;min-height:55px}#answers button:hover{background:var(--cream)}#reaction{font-size:13px;min-height:22px;margin-top:12px;color:#75694e}#match-result{text-align:center}.friend-portrait{width:145px;height:145px;object-fit:contain;display:block;margin:12px auto 20px}#result-name{font-size:32px;margin:6px 0}.tag{display:inline-block;border-radius:999px;padding:7px 15px;background:var(--pink);font-size:12px;margin:8px 0 17px}.friend-line{font-size:12px;line-height:1.8;padding:15px;background:var(--cream);border-radius:12px;margin-top:20px}.panel{text-align:center;max-width:660px;margin:auto;padding:35px 32px;border:1px solid var(--line);border-radius:24px}.panel h2{font-size:32px;line-height:1.4;letter-spacing:-.04em;margin:18px 0}.panel>.primary,.panel>.secondary,#letter-form>.primary,#letter-done>.primary{width:100%;margin-top:20px}.panel .eyebrow{font-size:10px;margin-bottom:20px}.game-slot{border:1px dashed var(--line);border-radius:15px;padding:25px;margin:24px 0;color:#75694e;font-size:13px}.photo-examples{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px}.photo-examples img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:16px;display:block}.photo-examples figcaption{font-size:11px;margin-top:10px}.photo-actions{display:flex;gap:10px;margin-top:18px}.photo-actions>*{flex:1}.file-button{position:relative;cursor:pointer}.file-button input{opacity:0;position:absolute;inset:0;width:100%;cursor:pointer}.file-button:focus-within{outline:3px solid #64796a;outline-offset:3px}.service-note{font-size:12px;background:var(--cream);border-radius:12px;padding:14px;line-height:1.8;margin-top:22px}.consent{display:flex;gap:10px;align-items:flex-start;text-align:left;font-size:12px;line-height:1.8;margin-top:20px}.consent input{flex:none;width:18px;height:18px;margin-top:2px;accent-color:var(--ink)}#photo-selected{max-width:180px;max-height:220px;border-radius:15px;object-fit:contain;margin-top:22px}#photo-result{display:block;max-width:100%;max-height:620px;border-radius:18px;margin:20px auto 0}#photo-status,#letter-error{font-size:13px;line-height:1.8;margin-top:16px}#photo-processing{background:var(--cream);border-radius:15px;padding:25px;margin-top:20px;font-size:14px}.spinner{display:block;width:28px;height:28px;border:2px solid var(--line);border-top-color:var(--ink);border-radius:50%;margin:0 auto 14px;animation:spin 1.5s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.letter-paper{background:url('assets/letter-paper.png') center/100% 100% no-repeat;margin-top:25px;padding:32% 13% 14%;text-align:left;font-family:LetterPen,Pretendard,sans-serif;min-height:570px;font-size:26px}.letter-paper>label{display:block}.letter-paper textarea{display:block;border:0;background:transparent;width:100%;min-height:230px;line-height:1.45;font:inherit;resize:vertical;padding:8px 0}.letter-paper .from{text-align:right;font-size:23px}.from input{border:0;border-bottom:1px solid #d7c5b5;background:transparent;width:130px;max-width:65%;font:inherit;padding:4px}.finished-paper{position:relative;margin-top:24px}.finished-paper>img{position:absolute;inset:0;width:100%;height:100%}.finished-paper>div{position:relative;padding:30% 13% 13%;min-height:570px;text-align:left;font-family:LetterPen,Pretendard,sans-serif;font-size:26px;line-height:1.45}.finished-paper #finished-message{white-space:pre-wrap;overflow-wrap:anywhere;margin:12px 0 20px}.finished-paper #finished-from{text-align:right}.ending>.secondary{margin-top:25px}.ending .friend-portrait{height:190px;width:190px}.film-note{border-top:1px solid var(--line);text-align:center;margin:30px auto 0;padding:25px 0 35px}.film-note b{font-size:13px}.film-note p{font-size:12px;color:#75694e;margin-top:9px;line-height:1.8}.showcase-footer{text-align:center;background:#fff;padding:0 0 30px}.showcase-footer .stripe{height:15px;margin-bottom:25px}.showcase-footer>img{width:92px;height:34px;object-fit:contain}.showcase-footer p,.showcase-footer a{font-size:11px;color:#75694e;margin-top:12px;display:block}.showcase-main .eyebrow{color:#91616b}.letter-panel .sub{max-width:460px;margin:auto}
@media(max-width:820px){.nav .menu a{padding:14px 24px;font-size:14px}.showcase-main{padding:0 20px}.showcase-hero{padding:110px 0 30px;gap:25px;min-height:auto}.hero-copy h1{font-size:46px}.hero-door img{height:350px}.hero-lead{font-size:16px}.experience{padding-top:90px}.survey{grid-template-columns:1fr 1.1fr}.dialogue{padding:26px 22px}.dialogue h2{font-size:22px}.journey li{padding:0 12px}.journey b{font-size:13px}}
@media(max-width:600px){.showcase-hero{grid-template-columns:1fr;text-align:center}.hero-copy h1{font-size:50px}.hero-copy .eyebrow{font-size:9px;letter-spacing:.2em}.hero-copy .sub{font-size:13px}.hero-copy .primary{width:100%}.hero-door{max-width:270px;justify-self:center}.hero-door img{height:330px}.journey ol{grid-template-columns:1fr 1fr;gap:22px 0}.journey li:nth-child(2){border:0}.journey li:nth-child(3){padding-left:0}.journey small{font-size:10px}.experience-top>span{display:none}.survey{display:flex;flex-direction:column;min-height:0}.cinema{width:100%;height:265px;min-height:265px}.cinema>img,.cinema>video{object-position:center 40%}.scene-label{bottom:12px}.dialogue{padding:25px 22px;width:100%}.dialogue .eyebrow{margin-bottom:14px}.dialogue h2{font-size:22px}.speaker{margin-bottom:10px}.progress{margin-bottom:16px;position:sticky;top:70px;z-index:5;box-shadow:0 3px 6px #3e321608}.progress button{min-height:52px;font-size:12px}.panel{padding:26px 19px}.panel h2{font-size:27px}.sub{font-size:13px}.photo-examples{gap:10px}.letter-paper{font-size:25px;min-height:460px;padding-top:32%}.letter-paper textarea{min-height:220px}.letter-paper .from{font-size:22px}.finished-paper>div{font-size:25px;min-height:460px}.photo-actions .secondary{font-size:12px;padding:14px 10px}.primary,.secondary{min-height:50px}.film-note p{font-size:11px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

h2[tabindex='-1']:focus{outline:none}

.letter-panel{scroll-margin-top:145px}.letter-paper{padding-top:39%}.finished-paper>div{padding-top:39%}
.letter-paper{position:relative}
.letter-paper:before,.finished-paper:before{content:"";position:absolute;inset:0;background:url('assets/letter-paper-clean.png') center/100% 100% no-repeat;clip-path:inset(30% 10% 7% 11%);pointer-events:none}
.letter-paper textarea{position:relative;z-index:1;min-height:280px}
.finished-paper:before{z-index:1}.finished-paper>div{z-index:2}
.finished-paper #finished-message{margin:0;min-height:250px}
.archive-invitation{display:flex;align-items:center;gap:12px;text-align:left;margin-top:32px;padding:25px 20px;background:linear-gradient(130deg,#f5e8ed,#e8e4ec);border-radius:18px}
.archive-invitation .eyebrow{font-size:9px;margin-bottom:12px;letter-spacing:.12em}
.archive-invitation h3{font-size:22px;letter-spacing:-.045em}
.archive-invitation p:not(.eyebrow){font-size:12px;line-height:1.8;margin:10px 0 17px;color:#75646a}
.archive-invitation .secondary{font-size:12px;padding:12px 16px;min-height:44px}
.archive-invitation>img{width:100px;max-width:25%;height:auto;flex:none;transform:rotate(8deg)}
.archive-entry{text-align:center;margin:24px auto 0}
.photo-archive-invitation{background:linear-gradient(130deg,#f6ebdf,#e7ecdf)}.photo-archive-invitation>img{border:6px solid #fffaf5;border-bottom-width:14px;box-shadow:0 4px 12px #55432915;border-radius:3px;transform:rotate(6deg)}
.archive-open{overflow:hidden}
#archive-dialog{padding:0;border:1px solid #e7dce2;border-radius:22px;width:min(1280px,96vw);max-width:none;height:92dvh;max-height:96dvh;background:#fff;color:var(--ink);overflow:hidden}
#archive-dialog[open]{display:flex;flex-direction:column}
#archive-dialog::backdrop{background:#30262c99;backdrop-filter:blur(5px)}
.archive-dialog-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;background:#fff;border-bottom:1px solid var(--line);flex:none}
.archive-dialog-top h2{font-size:14px;letter-spacing:-.025em}
.archive-dialog-top .secondary{font-size:12px;min-height:44px;padding:10px 16px;white-space:nowrap}
#archive-frame{display:block;width:100%;border:0;flex:1;min-height:0;background:#fff}
@media(max-width:600px){.archive-invitation{padding:22px 16px}.archive-invitation h3{font-size:20px}.archive-invitation>img{width:70px}#archive-dialog{width:100vw;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0}.archive-dialog-top{padding:10px 12px;padding-top:max(10px,env(safe-area-inset-top))}.archive-dialog-top h2{font-size:11px}.archive-dialog-top .secondary{font-size:11px;padding:9px 12px}.letter-paper textarea{min-height:260px}}

.game-panel{max-width:960px;padding:32px 24px}
.game-companion{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 0 22px}
.game-companion img{width:58px;height:58px;object-fit:contain}
.game-shell{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#fcf7ef}
.game-toolbar{display:flex;justify-content:space-between;align-items:center;padding:0 16px;background:#fffaf4;gap:12px}
.game-toolbar>span{font-size:11px;letter-spacing:.12em;font-weight:750}
.game-toolbar button{white-space:nowrap}
.game-viewport{position:relative;aspect-ratio:16/9;background:#211d16;overflow:hidden}
.game-viewport iframe{display:block;width:100%;height:100%;border:0;position:absolute;inset:0}
.game-launch{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;background:radial-gradient(ellipse at 10% 10%,#dee9d6,transparent 55%),radial-gradient(ellipse at 90% 90%,#f9dedb,transparent 55%),#fff5e5;padding:24px}
.game-launch>p{font-size:clamp(19px,3vw,32px);line-height:1.6;letter-spacing:-.04em}
.game-launch>span{font-size:11px;line-height:1.7;color:#75694e}
.game-loading{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#fff8ed;font-size:13px;padding:20px}
.game-loading .spinner{margin:0}.game-loading progress{width:min(240px,80%);height:7px;accent-color:#75694e}
.game-error{padding:18px;font-size:13px;line-height:1.8}.game-error button{margin-top:12px}
.game-expanded{overflow:hidden}
.game-expanded .showcase-main{z-index:100}
.game-shell.expanded{position:fixed;inset:0;z-index:2000;border:0;border-radius:0;display:flex;flex-direction:column;background:#211d16;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.game-shell.expanded .game-toolbar{flex:none;min-height:48px}
.game-shell.expanded .game-viewport{flex:1;aspect-ratio:auto;min-height:0}
.game-shell.expanded .game-error{background:#fff8ed;flex:none}
@media(max-width:600px){.game-panel{padding:24px 12px}.game-companion{gap:8px}.game-companion .sub{font-size:12px}.game-companion img{width:44px;height:44px}.game-launch{gap:10px;padding:12px}.game-launch>p{font-size:17px;line-height:1.4}.game-launch .primary{min-height:44px;padding:10px 18px;font-size:12px}.game-launch>span{font-size:10px}.game-viewport:has(.game-launch:not([hidden])){min-height:250px}.game-shell.expanded .game-launch>p{font-size:24px}}

/* Fixed landscape tablet exhibition; allow natural scrolling for the on-screen keyboard. */
.journey ol,.progress{grid-template-columns:repeat(3,minmax(0,1fr))}
.game-letter{display:none}.game-shell.expanded .game-letter{display:block;margin-left:auto}
.in-experience>.showcase-footer,.in-experience .film-note,.in-experience .showcase-main>.archive-entry{display:none}
@media(min-width:900px) and (orientation:landscape){
 .showcase-main{max-width:1366px;padding:0 32px}
 .showcase-hero{min-height:0;padding:100px 0 24px;gap:45px}
 .hero-copy h1{font-size:54px}.hero-copy .eyebrow{margin-bottom:18px}.hero-lead{margin:20px 0 10px}
 .hero-door{max-width:280px}.hero-door img{height:min(42dvh,360px)}
 .journey{padding:18px 0;margin-bottom:12px}.journey span{margin-bottom:6px}.archive-entry{margin:12px auto}
 .experience{padding:84px 0 20px;max-width:1200px;scroll-margin-top:0}
 .experience-top{margin:0 0 6px}.progress{margin-bottom:12px}.progress button{min-height:50px;font-size:15px}
 .companion{margin-bottom:8px;font-size:12px}.companion img{height:32px;width:32px}
 .survey{grid-template-columns:1fr 1.1fr;min-height:calc(100dvh - 200px)}
 .dialogue{padding:24px 30px}.dialogue .eyebrow{margin-bottom:10px}.speaker{margin-bottom:8px}
 .dialogue h2{font-size:24px;line-height:1.45;margin-bottom:16px}.question-meta{margin-bottom:12px}
 #answers button{font-size:16px;min-height:56px;padding:14px 18px}
 #match-result .friend-portrait{width:105px;height:105px;margin:0 auto 8px}#result-name{font-size:28px}
 #match-result .tag{margin:4px 0 10px}.friend-line{padding:10px;margin-top:12px}
 .game-panel{max-width:none;padding:16px 24px}.game-panel>.eyebrow{margin-bottom:4px}.game-panel>h2{font-size:24px;margin:6px 0}
 .game-companion{margin:0 0 10px}.game-companion img{width:36px;height:36px}
 .game-shell{max-width:760px;margin:auto}.game-viewport{max-height:calc(100dvh - 390px);min-height:230px}
 .game-shell.expanded{max-width:none;margin:0}.game-shell.expanded .game-viewport{max-height:none;min-height:0}
 .game-panel>.primary{width:auto;min-width:260px;margin-top:12px}.game-panel>.hint{margin:8px 0;font-size:11px}
 .game-mobile-hint{display:none}
 .letter-panel{max-width:none;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:32px;padding:24px 28px;text-align:left;scroll-margin-top:90px}
 .letter-panel>.eyebrow{grid-column:1;grid-row:1;margin:0;align-self:end}
 .letter-panel>h2{grid-column:1;grid-row:2;margin:12px 0;font-size:30px}
 .letter-panel>.sub{grid-column:1;grid-row:3;margin:0;font-size:13px}
 .letter-panel>.archive-invitation{grid-column:1;grid-row:4;align-self:start;margin-top:20px;padding:18px;background:#fff;border:1px solid var(--line)}
 .letter-panel>.archive-invitation h3{font-size:21px}
 #letter-form,#letter-done{grid-column:2;grid-row:1 / span 5;min-width:0;text-align:center}
 .letter-paper{margin:0;min-height:330px;padding:26% 12% 8%;font-size:24px}
 .letter-paper textarea{height:160px;min-height:160px;max-height:340px;font-size:24px}
 #letter-form .consent{margin-top:12px;font-size:12px}#letter-form .hint{margin:8px 0}
 #letter-form>.primary{margin-top:10px;min-height:50px}
 .finished-paper{margin-top:0}.finished-paper>div{min-height:330px;padding:26% 12% 8%;font-size:24px}
 .finished-paper #finished-message{min-height:160px}.letter-panel #letter-storage-status{font-size:12px;margin-top:10px}
 .ending{max-width:800px;padding:24px}.ending .friend-portrait{width:110px;height:110px;margin:0 auto 10px}.ending h2{font-size:28px;margin:10px 0}
}
@media(max-width:600px){.journey ol{grid-template-columns:1fr;gap:18px}.journey li{padding:0;border:0}.journey li small{font-size:12px}.experience-top>div{display:flex}}

.letter-destinations{border:0;padding:0;margin:16px 0 0;text-align:left;display:grid;gap:10px}
.letter-destinations legend{font-size:13px;font-weight:700;padding:0;margin-bottom:10px}
.letter-destination{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:14px;padding:14px 16px;cursor:pointer;min-height:70px;background:#fff}
.letter-destination:has(input:checked){background:#f8edf0;border-color:#ad838e}.letter-destination:has(input:focus-visible){outline:3px solid #64796a;outline-offset:3px}
.letter-destination input{width:20px;height:20px;flex:none;accent-color:var(--ink)}.letter-destination strong{display:block;font-size:15px}.letter-destination small{display:block;font-size:11px;line-height:1.6;margin-top:4px;color:#75694e}
#letter-done #finish{margin-top:16px}#letter-service{font-size:11px}
@media(min-width:900px) and (orientation:landscape){.letter-destinations{grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.letter-destination{padding:10px;gap:8px}.letter-destination strong{font-size:13px}.letter-destination small{font-size:10px}.letter-destinations legend{margin-bottom:6px}.letter-panel .letter-paper{min-height:275px;padding-top:22%;padding-bottom:5%}.letter-panel .letter-paper textarea{height:140px;min-height:140px}.letter-panel #letter-count{margin:4px 0}.letter-panel #letter-service{margin:5px 0}}