@font-face{font-family:Dialogue;src:url("fonts/NotoSansKR-Variable.ttf") format("truetype");font-weight:100 900;font-display:swap}
@font-face{font-family:Book;src:url("fonts/NanumMyeongjo-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
:root{color-scheme:dark;--paper:#f7f5ee;--ink:#20252b;--muted:#b9c2c9;--gold:#d3b584}
*{box-sizing:border-box}
html{scroll-padding-top:12px}
body{margin:0;background:#0c1117;color:var(--paper);font-family:Dialogue,"Malgun Gothic",sans-serif;font-weight:500;word-break:keep-all;overflow-wrap:break-word}
a{color:inherit;text-decoration:none;touch-action:manipulation}a:hover{color:var(--gold)}
a:focus-visible{outline:3px solid var(--gold);outline-offset:5px}
.skip{position:absolute;left:12px;top:-100px;background:var(--paper);color:var(--ink);padding:12px;z-index:5}.skip:focus{top:12px}
.masthead{max-width:1100px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:16px 24px;gap:16px}
.brand{font-family:Book,serif;font-weight:700;font-size:22px;letter-spacing:.08em}
.masthead a{min-height:44px;display:inline-flex;align-items:center;font-size:14px}
header{max-width:760px;padding:48px 24px 40px;margin:auto;text-align:center}
.eyebrow{color:var(--gold);font-size:14px;margin:0 0 20px}
h1{font-family:Book,serif;font-weight:700;font-size:clamp(30px,6vw,48px);line-height:1.35;margin:0 0 22px;text-wrap:balance}
.dek{color:var(--muted);font-size:16px;line-height:1.8;margin:0}
.start{display:inline-flex;align-items:center;min-height:48px;padding:8px 20px;border-bottom:1px solid #9a825e;margin-top:24px}
main{max-width:760px;margin:auto}
.chapter-marker{padding:42px 24px 30px;text-align:center;color:var(--gold);font-size:15px;letter-spacing:.04em}
.panel{margin:0 0 16px;position:relative;container-type:inline-size;isolation:isolate;background:#18212a}
.art{position:relative;overflow:hidden;aspect-ratio:var(--ratio,2/3)}
.art img{display:block;width:var(--zoom,100%);height:auto;max-width:none;position:absolute;left:var(--ix,0%);top:var(--iy,0%)}
.bubble,.thought,.caption{position:absolute;z-index:2;font-weight:500;font-size:clamp(16px,4.5cqw,27px);line-height:1.5;letter-spacing:-.025em}
.bubble{left:var(--x);top:var(--y);width:var(--w);padding:3.1% 4%;margin:0;border-radius:50% / 46%;text-align:center;background:var(--paper);color:var(--ink);box-shadow:0 1px 2px #0003;isolation:isolate}
/* Keep the tail joined to the oval, but paint ALL lettering above it. */
.bubble-text{position:relative;z-index:1}
.bubble::after{content:"";position:absolute;z-index:0;pointer-events:none;left:clamp(18%,var(--tail,50%),81%);top:-20px;width:26px;height:50px;background:var(--paper);clip-path:polygon(0 100%,100% 100%,70% 0)}
.bubble.down::after{top:calc(100% - 30px);transform:rotate(180deg)}
.thought{left:var(--x);top:var(--y);width:var(--w);margin:0;padding:3%;background:#0b131be8;border-left:2px solid #b8a17c;color:var(--paper)}
.caption{left:var(--x,5%);top:var(--y,6%);width:var(--w,90%);margin:0;padding:2% 3%;font-size:clamp(16px,3.5cqw,23px);background:#0a1019e8;line-height:1.7}
.under-caption{margin:0;padding:20px 24px 26px;background:#0c1117;font-size:clamp(16px,3vw,20px);line-height:1.8}
.pause{padding:40px 24px 46px;max-width:650px;margin:auto;font-size:clamp(17px,3vw,22px);line-height:1.9;color:#dde3e8}
.pause strong{font-weight:600;color:var(--gold)}
.phone-screen{position:absolute;z-index:2;left:21.1%;top:7.45%;width:55.7%;height:81.25%;display:flex;flex-direction:column;background:#f5f5f1;color:#20262b;border-radius:11% / 5%;overflow:hidden;box-shadow:inset 0 0 12px #25334416;letter-spacing:-.02em}
.phone-status{display:flex;justify-content:space-between;align-items:center;padding:4.2% 8% 2%;font-size:clamp(9px,1.7cqw,12px);font-weight:600;color:#454e54}
.status-icons{display:flex;align-items:center;gap:7px}
.signal{display:block;width:12px;height:10px;background:linear-gradient(to right,#59646a 20%,transparent 20% 30%,#59646a 30% 50%,transparent 50% 60%,#59646a 60% 80%,transparent 80%);clip-path:polygon(0 70%,30% 70%,30% 40%,60% 40%,60% 0,100% 0,100% 100%,0 100%)}
.battery{display:block;position:relative;width:16px;height:8px;border:1px solid #59646a;border-radius:2px}
.battery::before{content:"";position:absolute;inset:1px 3px 1px 1px;background:#59646a}
.battery::after{content:"";position:absolute;right:-3px;top:2px;width:2px;height:2px;background:#59646a}
.phone-heading{display:flex;align-items:center;justify-content:space-between;padding:4% 7% 5%;font-size:clamp(14px,3cqw,21px);font-weight:600}
.back-chevron{width:8px;height:8px;border-left:2px solid #344952;border-bottom:2px solid #344952;transform:rotate(45deg)}
.more-dots{font-weight:700;letter-spacing:2px;line-height:1}
.phone-contact{display:flex;align-items:center;gap:7%;padding:3% 7% 7%;border-bottom:1px solid #d6dcd9;font-size:clamp(11px,2.2cqw,16px);color:#465558;white-space:nowrap}
.contact-avatar{position:relative;display:block;flex:none;width:18%;aspect-ratio:1;border-radius:50%;background:#e0e7e4}
.contact-avatar::before{content:"";position:absolute;left:36%;top:20%;width:28%;height:28%;border-radius:50%;background:#81938c}
.contact-avatar::after{content:"";position:absolute;left:24%;top:52%;width:52%;height:28%;border-radius:50% 50% 30% 30%;background:#81938c}
.phone-conversation{flex:1;padding:8% 6%;background:linear-gradient(#eef2ef,#f5f5f1)}
.message-kind{margin:0 0 13%;text-align:center;font-size:clamp(10px,2cqw,14px);color:#5f6c69;font-weight:400}
.incoming-message{position:relative;margin:0 0 0 2%;padding:8% 7%;border:1px solid #d2dbd5;border-radius:3px 15px 15px 15px;background:#e0e9e2;color:#192e27;font-size:clamp(16px,3.7cqw,27px);line-height:1.8;font-weight:500;letter-spacing:-.025em;box-shadow:0 2px 3px #1c38210b}
.phone-compose{display:flex;align-items:center;gap:7%;padding:6% 7% 8%;color:#687571}
.compose-plus{font-size:clamp(20px,4cqw,28px);font-weight:400}
.compose-placeholder{flex:1;border:1px solid #cbd3ce;border-radius:24px;padding:6% 8%;font-size:clamp(11px,2.2cqw,16px);font-weight:400}
.end{padding:70px 24px 60px;text-align:center}
.end p{font-family:Book,serif;font-size:clamp(23px,4vw,32px);line-height:1.8}
.end a{display:inline-flex;align-items:center;min-height:48px;margin-top:18px;border-bottom:1px solid #68727c}
footer{border-top:1px solid #29323b;max-width:760px;margin:auto;padding:28px 24px 52px;font-size:13px;line-height:1.8;color:var(--muted)}
@media(max-width:440px){.masthead{padding:8px 16px}.brand{font-size:19px}header{padding:36px 20px 26px}.panel{margin-bottom:10px}.bubble{padding:3.5% 4.2%}.bubble::after{width:20px;height:38px;top:-16px}.bubble.down::after{top:calc(100% - 22px)}.pause{padding:28px 22px 34px}.chapter-marker{padding:30px 20px 24px}.under-caption{padding:18px 20px 22px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}