/* ========================================================= 1ST ANNIVERSARY — key visual ========================================================= */ :root{ /* ---- 색 : 여기 다섯 줄만 바꾸면 전체 색이 바뀝니다 ---- */ --paper:#F2F1EB; /* 배경 (살짝 따뜻한 오프화이트) */ --ink:#1E282C; /* 선과 글자 (차가운 먹색) */ --blue:#9ABADB; /* 포인트 1 — 연한 블루 */ --sage:#8FA98C; /* 포인트 2 — 세이지 그린 */ --blue-deep:#5F86B2; /* 블루 진한 톤 */ --sage-deep:#637F60; /* 세이지 진한 톤 */ --mono:'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --jp:'Noto Sans JP', 'Noto Sans KR', system-ui, sans-serif; --kr:'Noto Sans KR', 'Noto Sans JP', system-ui, sans-serif; --serif:'Playfair Display', 'Times New Roman', serif; /* ========================================================= 애니메이션 박자 아래 네 줄만 바꾸면 전체 리듬이 '일정하게' 유지됩니다. 그림이 나오는 시각은 밑에서 자동으로 계산되니 건드리지 마세요. - 전체를 느리게/빠르게 → --hold 를 키우거나 줄이기 - 그림 사이 여백 조절 → --gap ========================================================= */ --t0: .85s; /* 첫 그림(두상)이 나오기 시작하는 시각 */ --inDur: .65s; /* 나타나는 데 걸리는 시간 */ --outDur: .50s; /* 사라지는 데 걸리는 시간 */ --hold: 2.40s; /* 다 보인 채로 머무는 시간 (그림마다 동일) */ --gap: .35s; /* 하나가 사라지고 다음이 나올 때까지의 빈 틈 (동일) */ --afterTyping: .6s; /* 왼쪽 글이 다 찍힌 뒤 가운데 그림이 뜨기까지의 쉼 */ /* ↓ 여기부터는 자동 계산 — 손대지 않아도 됩니다 ↓ 두상 등장 → 머무름 → 퇴장 → 빈 틈 → 왼쪽 전신 → … → 가운데 전신 */ --headIn: var(--t0); --headOut: calc(var(--headIn) + var(--inDur) + var(--hold)); --leftIn: calc(var(--headOut) + var(--outDur) + var(--gap)); --leftOut: calc(var(--leftIn) + var(--inDur) + var(--hold)); --centerIn: calc(var(--leftOut) + var(--outDur) + var(--gap)); --easeOut:cubic-bezier(.16,.84,.26,1); --easeIn:cubic-bezier(.6,0,.9,.3); } *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{ background:var(--paper); color:var(--ink); font-family:var(--kr); overflow:hidden; -webkit-font-smoothing:antialiased; } .viewport{ position:fixed; inset:0; overflow:hidden; background:var(--paper); } .viewport::after{ /* 종이 질감 */ content:''; position:absolute; inset:0; pointer-events:none; z-index:60; opacity:.5; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E"); } /* 음악이 재생될 때 첫 장면을 엽니다. */ /* ---------- 여는 화면 ---------- 소리 나는 자동 재생이 막히면 뜹니다. 본편과 같은 액자(위 띠·아래 체크무늬) 안에 표지 한 장을 둔 모양입니다. 요소마다 조금씩 늦게 떠오릅니다. */ .music-opening ~ .viewport{visibility:hidden} .music-opening{ position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none; margin:0;padding:0;border:0;overflow:hidden; background:var(--paper);color:var(--ink); } .music-opening[open]{display:grid;place-items:center} /* 닫혔을 때의 display:none 을 건드리지 않으려고 [open] 에만 겁니다 */ .music-opening::backdrop{background:var(--paper)} .music-opening__band{ position:absolute;left:0;right:0;top:0;height:30px;background:var(--blue); animation:openBand .75s var(--easeOut) both; } .music-opening__check{ position:absolute;left:0;right:0;bottom:0;height:28px; background:repeating-conic-gradient(var(--blue) 0 25%,transparent 0 50%) 0 0/28px 28px; animation:fadeIn .8s var(--easeOut) 1.05s both; } @keyframes openBand{from{transform:translateY(-100%)}to{transform:translateY(0)}} .music-opening__sheet{ display:flex;flex-direction:column;align-items:center; padding:0 1.5rem;text-align:center; } .music-opening__kicker{ font-family:var(--mono);font-size:clamp(9px,2.4vw,11px);letter-spacing:.34em; color:var(--sage-deep); animation:fadeIn .9s var(--easeOut) .25s both; } .music-opening__title{ margin:clamp(.9rem,3vw,1.5rem) 0 0; font-family:var(--serif);font-style:italic;font-weight:700; /* 낮은 창에서도 넘치지 않도록 세로 길이도 함께 봅니다 */ font-size:clamp(2.4rem,min(10vw,13vh),5.4rem); line-height:.96;letter-spacing:.01em; animation:rise 1s var(--easeOut) .45s both; } .music-opening__rule{ width:46px;height:2px;background:var(--blue-deep); margin:clamp(1rem,3.4vw,1.7rem) 0; animation:fadeIn .8s var(--easeOut) .85s both; } .music-opening__date{ font-family:var(--mono);font-size:clamp(10px,2.6vw,12px);letter-spacing:.28em;opacity:.68; animation:fadeIn .9s var(--easeOut) .95s both; } .music-opening__start{ margin-top:clamp(1.5rem,4.6vw,2.3rem); min-width:min(17rem,80vw);min-height:50px;padding:.78rem 1.4rem;cursor:pointer; border:1.6px solid var(--ink);background:var(--blue);color:var(--ink); font-family:var(--kr);font-weight:700;font-size:clamp(.95rem,3.2vw,1.02rem); letter-spacing:.02em;transition:background .2s,color .2s; animation:rise .9s var(--easeOut) 1.15s both; } .music-opening__start::before{content:"\266A";margin-right:.6em} /* 음표. js 가 글자를 바꿔도 남습니다 */ .music-opening__start:hover{background:var(--ink);color:var(--paper)} .music-opening__start[aria-busy="true"]{cursor:wait;background:var(--paper);opacity:.75} .music-opening__skip{ margin-top:.85rem;min-height:40px;padding:.3rem .8rem;cursor:pointer; border:0;background:transparent;color:var(--ink);opacity:.7; font-family:var(--kr);font-size:clamp(.8rem,2.8vw,.86rem); text-decoration:underline;text-underline-offset:.28em;text-decoration-thickness:1px; transition:opacity .18s; animation:fadeIn .9s var(--easeOut) 1.3s both; } .music-opening__skip:hover{opacity:1} .music-opening__credit{ margin-top:clamp(1.6rem,5.5vw,2.6rem); font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;opacity:.48; animation:fadeIn 1s var(--easeOut) 1.5s both; } .music-opening button:focus-visible{outline:2px solid var(--ink);outline-offset:4px} /* ---------- 스테이지 (1600 x 900 고정 캔버스를 화면에 맞춰 축소) ---------- */ .stage{ position:relative; width:1600px; height:900px; /* height 는 js 가 창에 맞춰 다시 정합니다 */ background:var(--paper); position:absolute; left:0; top:0; transform:translate(var(--ox,0px), var(--oy,0px)) scale(var(--scale,1)); transform-origin:0 0; overflow:hidden; box-shadow:0 0 0 1px rgba(17,17,17,.08); } /* ---------- 노란 띠 ---------- */ .band{ position:absolute;left:0;right:0;height:30px;z-index:30; background:var(--blue); display:flex;align-items:center;gap:18px; padding:0 18px; font-family:var(--mono);font-size:11px;letter-spacing:.22em; text-transform:uppercase; } .band--top{top:0;justify-content:space-between;transform:translateY(-100%)} .band--bottom{bottom:0;transform:translateY(100%);background:var(--sage)} .band__credit{flex:none} .marquee{flex:1;overflow:hidden;white-space:nowrap;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 93%,transparent)} .marquee__inner{display:inline-block;animation:slide 26s linear infinite;will-change:transform} @keyframes slide{to{transform:translateX(-50%)}} .replay{ flex:none;border:1.5px solid var(--ink);background:transparent;color:var(--ink); font-family:var(--mono);font-size:10px;letter-spacing:.2em;padding:3px 10px; cursor:pointer;transition:background .18s,color .18s; } .replay{text-decoration:none;display:inline-block} .replay:hover{background:var(--ink);color:var(--paper)} /* ---------- 편지가 끝나면 나타나는 다음 장 버튼 ---------- 아래 띠(30px) 바로 위 오른쪽 끝. 띠 안의 BACK 버튼과 오른쪽 선을 맞췄습니다. 편지가 다 드러나면 js 가 body 에 letter-done 을 붙이고, 그때 떠오릅니다. 일러스트 위로 겹쳐 그려집니다(z-index 9). */ .p2next{ position:absolute;right:18px;bottom:38px;z-index:9; font-family:var(--mono);font-size:12px;letter-spacing:.26em; color:var(--ink);text-decoration:none;background:var(--paper); border:1.5px solid var(--ink);padding:7px 16px; opacity:0;pointer-events:none; transition:background .18s,color .18s; } .letter-done .p2next{ pointer-events:auto; animation:p2nextIn .9s var(--easeOut) both, p2nextBlink 2.8s ease-in-out .9s infinite; } .p2next:hover{background:var(--ink);color:var(--paper)} @keyframes p2nextIn{ from{opacity:0;transform:translateY(14px)} to {opacity:1;transform:translateY(0)} } /* 그림 위에 겹쳐 있어서, 깜빡임은 글자가 묻히지 않을 만큼만 */ @keyframes p2nextBlink{0%,100%{opacity:1}50%{opacity:.78}} /* ========================================================= 세 번째 페이지 — 종이 콜라주 1400x600 상자 안에 px 로 배치합니다. 상자째 가운데에 두므로 창 크기가 바뀌어도 구도가 흐트러지지 않습니다. ========================================================= */ /* 바탕·글자·포인트색 모두 1·2페이지와 같은 것만 씁니다. --card 는 종이 바탕 위에 올라가는 종이 조각 색입니다. */ .page-three{--card:#FFFFFF;--clip:#AEB8C2} .p3{ position:absolute;left:50%;top:50%;translate:-50% -50%; width:1400px;height:600px;z-index:4;color:var(--ink); } /* --- 가운데 큰 제목 --- */ .p3display{ position:absolute;left:350px;top:4px;width:700px;margin:0; text-align:center;white-space:pre-line; font-family:var(--serif);font-style:italic;font-weight:700; font-size:84px;line-height:.98;letter-spacing:.01em; animation:rise 1.1s var(--easeOut) .55s both; } /* --- 제목 바로 아래 대문자 한 줄 --- */ .p3sub{ position:absolute;left:350px;top:172px;width:700px; text-align:center;text-transform:uppercase; font-family:var(--mono);font-size:15px;letter-spacing:.42em; color:var(--sage-deep); animation:fadeIn .9s var(--easeOut) .9s both; } /* --- 왼쪽 도장 --- */ .p3stamp{ position:absolute;left:18px;top:18px;width:168px;height:168px; rotate:-9deg;color:var(--blue-deep); animation:p3pop 1s var(--easeOut) 1.05s both; } .p3stamp svg{width:100%;height:100%;overflow:visible} .p3stamp__ring{ font-family:var(--mono);font-size:12.5px;letter-spacing:.22em; fill:currentColor; } .p3stamp__num{ font-family:var(--serif);font-style:italic;font-weight:700;font-size:34px; fill:currentColor;text-anchor:middle; } /* --- 도장 아래 리본 --- */ .p3ribbon{ position:absolute;left:0;top:208px;width:286px;height:44px; rotate:-7deg; background:var(--sage);color:var(--paper); display:flex;align-items:center;justify-content:center; font-family:var(--kr);font-weight:700;font-size:16px;letter-spacing:.04em; clip-path:polygon(0 0,100% 0,100% 100%,0 100%,14px 50%); filter:drop-shadow(0 2px 2px rgba(30,40,44,.12)) drop-shadow(0 7px 14px rgba(30,40,44,.14)); animation:rise .9s var(--easeOut) 1.25s both; } .p3ribbon span{padding-left:14px} /* --- 가운데 찢어진 티켓 --- */ .p3ticket{ position:absolute;left:376px;top:264px;width:648px;height:240px;z-index:4; rotate:-1.2deg; /* 가까운 그림자가 찢긴 결을, 먼 그림자가 떠 있는 느낌을 만듭니다 */ filter:drop-shadow(0 2px 2px rgba(30,40,44,.14)) drop-shadow(0 12px 22px rgba(30,40,44,.14)); animation:rise 1.1s var(--easeOut) 1.45s both; } /* 위아래가 손으로 뜯긴 결. 숫자를 바꾸려면 폭(760)·높이(330)도 같이 맞춰야 합니다 */ .p3ticket__paper{ position:absolute;inset:0;background:var(--card);color:var(--ink); clip-path:polygon(0px 2.7px,21.57108133117748px 2.2px,54.04331272878166px 7.2px,86.94725808247775px 2.8px,108.31462383219565px 6.8px,139.7358450132591px 5.7px,170.24380642308947px 6.0px,207.0840840609121px 10.0px,233.24418436515222px 0.8px,263.3352222633756px 4.3px,302.1330499126275px 4.9px,328.8717046568766px 3.7px,352.03375476042345px 4.5px,385.81450179094753px 0.2px,407.41437288365114px 5.8px,438.94717393027554px 3.4px,474.42091798980726px 2.4px,511.9385976078302px 9.5px,547.4818122929271px 8.6px,570.7067145589954px 6.6px,600.0762843048766px 1.0px,629.6998694900268px 3.4px,648px 2.5px,648px 231.8px,617.9740602007143px 230.8px,589.5278070385149px 239.9px,560.9597868148442px 237.8px,532.2914918629575px 235.2px,499.2024842516042px 233.2px,473.33742530686453px 232.3px,443.602483207694px 240.0px,406.98600994417137px 231.1px,372.3206764617176px 239.5px,344.5508437524098px 230.8px,313.6765087732524px 236.0px,285.793739823622px 233.0px,256.9482360927829px 230.4px,234.22452991704114px 231.7px,200.73376311193414px 238.3px,178.22501017588738px 235.2px,139.950638295825px 237.9px,117.29550099314474px 237.1px,95.20162440706075px 230.4px,58.565562182794764px 238.1px,22.870219632105474px 231.2px,0px 230.7px); } .p3ticket__holes{ /* 왼쪽 스프링 구멍 */ position:absolute;left:16px;top:28px;bottom:28px;width:18px; background-image:radial-gradient(circle at 9px 11px,var(--paper) 0 6.4px,transparent 6.9px); background-size:18px 34px;background-repeat:repeat-y; } .p3ticket__side{ /* 세로로 선 글자 */ position:absolute;left:44px;top:40px;width:64px;height:170px; display:flex;align-items:center;justify-content:center; } .p3ticket__side span{ rotate:-90deg;white-space:nowrap; font-family:var(--mono);font-weight:500;font-size:20px;letter-spacing:.22em; } .p3ticket__body{position:absolute;left:124px;right:34px;top:34px;bottom:28px} .p3row{display:flex;align-items:baseline;gap:12px;border-bottom:1.6px solid var(--ink)} .p3row--date{padding-bottom:6px} .p3row--split{padding:12px 0 8px} .p3row--foot{border-bottom:0;padding-top:16px;justify-content:flex-end} .p3row__label{ flex:none;white-space:nowrap; font-family:var(--mono);font-size:14px;letter-spacing:.14em; } .p3row__label--2{margin-left:auto;padding-left:20px;border-left:1.6px solid var(--ink)} .p3row__date{ font-family:var(--serif);font-style:italic;font-weight:700; font-size:56px;line-height:1.05;letter-spacing:.01em; } .p3row__suf{font-family:var(--mono);font-size:15px;letter-spacing:.12em} .p3row__value{flex:none;white-space:nowrap; font-family:var(--kr);font-weight:500;font-size:21px;letter-spacing:-.01em} .p3row--foot span{ font-family:var(--kr);font-weight:500;font-size:14px;letter-spacing:.02em; color:var(--blue-deep); } /* --- 오른쪽 클립 꽂힌 쪽지 --- */ .p3note{ position:absolute;left:1004px;top:360px;width:268px;height:204px;z-index:5; rotate:-5deg; filter:drop-shadow(0 2px 2px rgba(30,40,44,.14)) drop-shadow(0 10px 18px rgba(30,40,44,.14)); animation:rise 1s var(--easeOut) 1.65s both; } .p3note__paper{ position:absolute;inset:0;padding:26px 22px 16px; background:var(--blue);color:var(--ink); clip-path:polygon(0px 5.5px,23.753288206305044px 5.6px,44.071460986494046px 6.9px,63.84165412297551px 1.1px,83.26186247747796px 0.1px,110.89756960548922px 4.5px,139.21235849100816px 3.5px,158.6130693596732px 6.3px,176.16734693408398px 6.5px,201.07019933813194px 3.5px,223.46459243217993px 6.1px,246.18624443594155px 7.3px,250px 5.1px,250px 300px,0px 300px); display:flex;flex-direction:column; } /* 라벨 · 영문 두 줄 · 한글이 모두 같은 왼쪽 선에 섭니다 */ .p3note__label{ font-family:var(--mono);font-size:10.5px;letter-spacing:.24em; } .p3note__en1{ /* 아래 줄과 글자 크기를 맞춥니다 */ margin-top:12px;white-space:nowrap; font-family:var(--mono);font-size:15px;letter-spacing:.06em;line-height:1.2; color:var(--sage-deep); } .p3note__en2{ margin:4px 0 0;white-space:nowrap; font-family:var(--serif);font-style:italic;font-size:15px;line-height:1.2; } .p3note__ko{ margin:8px 0 0;white-space:pre-wrap; /* 가운데 두 칸 띄운 걸 그대로 둡니다 */ font-family:var(--kr);font-weight:500;font-size:12.5px;line-height:1.5; letter-spacing:-.01em;word-break:keep-all; } .p3note__foot{ margin-top:auto;font-family:var(--mono);font-size:9px;letter-spacing:.2em;opacity:.75; } /* --- 그림 세 장 --- 전신 그림이 맨 뒤(z-index 2), 쪽지와 하트가 그 위에 얹힙니다. 하트 두 장은 티켓 아래 모서리를 살짝 물고 서로 겹칩니다. */ .p3art{ position:absolute;left:1162px;top:18px;width:276px;height:auto;z-index:2; filter:drop-shadow(0 10px 20px rgba(30,40,44,.13)); animation:rise 1.1s var(--easeOut) 1.3s both; } .p3heart{ position:absolute;width:184px;height:auto;z-index:5; filter:drop-shadow(0 3px 3px rgba(30,40,44,.12)) drop-shadow(0 10px 18px rgba(30,40,44,.14)); } .p3heart--1{left:22px;top:286px;rotate:-8deg; animation:p3pop .9s var(--easeOut) 1.75s both} .p3heart--2{left:138px;top:398px;rotate:6deg; animation:p3pop .9s var(--easeOut) 1.9s both} /* --- 클립 두 개 --- */ .p3clip{position:absolute;width:40px;height:92px;color:var(--clip);z-index:6} .p3clip--ticket{left:582px;top:226px;rotate:8deg; animation:fadeIn .7s var(--easeOut) 1.9s both} .p3clip--note{left:1032px;top:318px;rotate:-9deg; animation:fadeIn .7s var(--easeOut) 2.05s both} /* --- 아래 띠 위 체크무늬 --- */ .p3check{ position:absolute;left:0;right:0;bottom:30px;height:28px;z-index:3; background:repeating-conic-gradient(var(--blue) 0 25%,transparent 0 50%) 0 0/28px 28px; animation:fadeIn .8s var(--easeOut) 2.2s both; } @keyframes p3pop{ from{opacity:0;transform:scale(.86) rotate(-6deg)} to {opacity:1;transform:scale(1) rotate(0)} } /* ---------- 배경 음악 조작부 ---------- 아래 띠 안의 한 칸으로 들어갑니다. 띠가 원래 flex 라서, 자리를 비집고 들어가는 게 아니라 흐르는 글자 영역이 그만큼 줄어듭니다. 그래서 다른 요소를 가리거나 밀어내지 않습니다. */ .bgm{ flex:none;display:flex;align-items:center;gap:8px; color:var(--ink); } .bgm__btn{ flex:none;width:17px;height:17px;padding:0;cursor:pointer; border:1.5px solid var(--ink);border-radius:50%;background:transparent; position:relative;transition:background .18s; } .bgm__btn:hover{background:rgba(30,40,44,.14)} /* ▶ / ‖ 를 글자 대신 도형으로 그립니다 (서체에 기호가 없어도 똑같이 보이게) */ .bgm__play::before{ content:"";position:absolute;left:50%;top:50%; translate:-40% -50%; border-left:6px solid var(--ink); border-top:4px solid transparent;border-bottom:4px solid transparent; } .bgm.is-playing .bgm__play::before{ translate:-50% -50%; border:0;width:5px;height:8px; border-left:2px solid var(--ink);border-right:2px solid var(--ink); } .bgm__mute::before{ /* 소리 켜짐: 작은 원 */ content:"";position:absolute;left:50%;top:50%;translate:-50% -50%; width:5px;height:5px;border-radius:50%;background:var(--ink); } .bgm.is-muted .bgm__mute::before{ /* 음소거: 가로줄 */ width:8px;height:0;border-radius:0; border-top:2px solid var(--ink);background:transparent; } .bgm__time{ flex:none;font-size:9px;letter-spacing:.12em;opacity:.72; font-variant-numeric:tabular-nums;white-space:nowrap; } /* 두 막대 모두 '채워진 만큼' 을 --p 로 받아 배경 그라데이션으로 그립니다 */ .bgm__bar,.bgm__vol{ -webkit-appearance:none;appearance:none; flex:none;height:3px;border-radius:2px;cursor:pointer; background:linear-gradient(to right, var(--ink) var(--p,0%), rgba(30,40,44,.28) var(--p,0%)); } .bgm__bar{width:104px} .bgm__vol{width:48px} .bgm__bar::-webkit-slider-thumb,.bgm__vol::-webkit-slider-thumb{ -webkit-appearance:none;width:9px;height:9px;border-radius:50%; background:var(--ink);border:0;cursor:pointer; } .bgm__bar::-moz-range-thumb,.bgm__vol::-moz-range-thumb{ width:9px;height:9px;border-radius:50%;background:var(--ink);border:0;cursor:pointer; } .bgm__bar:focus-visible,.bgm__vol:focus-visible,.bgm__btn:focus-visible{ outline:2px solid var(--ink);outline-offset:2px; } /* ---------- 그림 ---------- */ .fig{position:absolute;z-index:2;pointer-events:none;opacity:0;color:var(--ink)} .fig__art,.fig__img{display:block;height:100%;width:auto;color:inherit} .fig__img{display:none} .fig.has-img .fig__img{display:block} .fig.has-img .fig__art{display:none} .fig::after{ /* 등장할 때 쓸고 지나가는 노란 바 */ content:'';position:absolute;left:-6%;right:-6%;height:12px;top:0; background:var(--blue);mix-blend-mode:multiply;opacity:0; } .fig__tag{ position:absolute;left:0;bottom:6%; font-family:var(--mono);font-size:11px;letter-spacing:.24em;color:var(--ink); background:var(--sage);padding:3px 8px;white-space:nowrap; } .fig--head {left:66%; top:3%; bottom:0; --din:var(--headIn); --dout:var(--headOut)} .fig--left {left:0.6%; top:calc(3.4% + 132px); bottom:30px; width:17.2%; display:flex; align-items:flex-end; --din:var(--leftIn); --dout:var(--leftOut)} /* 왼쪽 전신만 세로가 아니라 가로 기준으로 크기를 잡습니다 — 캔버스가 세로로 늘어나도 첫 칸 밖으로 번지지 않고, 창이 납작해지면 머리가 잘리는 대신 전체가 줄어듭니다. */ .fig--left .fig__img, .fig--left .fig__art{ width:100%; height:auto; max-height:100%; object-fit:contain; object-position:bottom center; } .fig--center{left:35%; bottom:30px; height:80%; --din:var(--centerIn)} .fig--head .fig__tag {left:4%;bottom:11%} .fig--left .fig__tag {left:2%;bottom:1%} /* ---------- 타이포 ---------- */ .anim{opacity:0} .wordmark{position:absolute;left:19.3%;top:4.5%;z-index:6;width:17%} .wordmark__main{ font-family:var(--jp);font-weight:200;font-size:30px; letter-spacing:.15em;line-height:1.14; } .wordmark__main span{display:block;white-space:nowrap} .wordmark__sub{ margin-top:9px;font-family:var(--mono);font-size:9.5px; letter-spacing:.52em;text-transform:uppercase;white-space:nowrap; } .wordmark__rule{display:block;margin-top:9px;width:72%;height:1.5px;background:var(--ink)} /* ========================================================= 타자기처럼 찍히는 글 덩어리 한글이 없는 줄은 자동으로 작은 고정폭 글씨 + 배경 없음 (js 가 판별) ========================================================= */ .typed{position:absolute;z-index:7;max-width:30%} .typed__line{ font-size:16px;font-weight:500;line-height:1.5;margin-bottom:8px; word-break:keep-all;visibility:hidden; } .typed__line:last-child{margin-bottom:0} /* 빈 줄은 글자·배경 없이 사이만 벌립니다 */ .typed__line--space{height:12px;margin-bottom:8px} .typed__line span{ background:var(--blue);padding:4px 9px;line-height:1.95; box-decoration-break:clone;-webkit-box-decoration-break:clone; } .typed__line--mono span{ background:transparent;padding:4px 0; font-family:var(--mono);font-size:12px;letter-spacing:.18em; } .typed--right{left:66%;top:66%} .typed--left{right:69%;top:39%;text-align:right} .typed--left .typed__line span{background:var(--sage)} /* 위 줄보다 뒤에 와야 영문·숫자 줄의 배경이 실제로 빠집니다 */ .typed .typed__line--mono span{background:transparent} .vtext{ position:absolute;z-index:7; font-family:var(--mono);font-size:11px;letter-spacing:.4em;text-transform:uppercase; white-space:nowrap;transform-origin:0 0;rotate:90deg; } .vtext--left{left:33.9%;top:24%} .bignum{ position:absolute;left:1.2%;top:3.4%;z-index:6; font-family:var(--jp);font-weight:900;font-size:148px;line-height:.8; letter-spacing:-.04em; } .stripes{ position:absolute;left:89.5%;top:52%;width:52px;height:92px;z-index:6;display:block; background:repeating-linear-gradient(90deg,var(--ink) 0 9px,transparent 9px 18px); } .cornermark{position:absolute;left:95%;top:4.5%;z-index:7;font-family:var(--mono);font-size:11px;letter-spacing:.2em;background:var(--paper);padding:4px 6px} /* ========================================================= 애니메이션 ========================================================= */ @keyframes bandIn{to{transform:translateY(0)}} @keyframes rise{ from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} } @keyframes figIn{ 0% {opacity:0;clip-path:inset(0 0 100% 0);transform:translateY(14px)} 34% {opacity:1} 40% {opacity:.25} 46% {opacity:1} 100%{opacity:1;clip-path:inset(0 0 0 0);transform:translateY(0)} } @keyframes figOut{ 0% {opacity:1;clip-path:inset(0 0 0 0);transform:translateY(0)} 18% {opacity:.3} 28% {opacity:1} 100%{opacity:0;clip-path:inset(100% 0 0 0);transform:translateY(-12px)} } @keyframes sweep{ 0% {opacity:1;top:0} 90% {opacity:1} 100%{opacity:0;top:100%} } @keyframes drift{ 0%,100%{transform:translateY(0)} 50% {transform:translateY(-9px)} } .is-playing .band--top{animation:bandIn .7s var(--easeOut) .05s both} .is-playing .band--bottom{animation:bandIn .7s var(--easeOut) .15s both} .is-playing .anim{animation:rise .75s var(--easeOut) var(--d,0s) both} .is-playing .fig{animation:figIn var(--inDur) var(--easeOut) var(--din) both} .is-playing .fig::after{animation:sweep var(--inDur) linear var(--din) both} .is-playing .fig--head{ animation: figIn var(--inDur) var(--easeOut) var(--din) both, figOut var(--outDur) var(--easeIn) var(--dout) forwards; } /* 왼쪽 전신은 정해진 시각이 아니라, 왼쪽 글이 다 찍힌 뒤에 사라집니다. 퇴장은 figOut 하나만 걸어 두어 등장 애니메이션을 건드리지 않습니다. */ .is-playing.left-out .fig--left{ animation: figOut var(--outDur) var(--easeIn) 0s forwards; } /* 가운데 그림은 공통 등장 규칙(.is-playing .fig)에서 빼둡니다. 안 빼면 옛 시각(--centerIn)에 먼저 떠버립니다. */ .is-playing .fig--center{animation:none} /* 가운데 그림은 시각을 미리 정해두지 않고, 왼쪽 글이 실제로 다 찍히면 붙는 typing-done 신호를 받아서 등장합니다. 글이 길어져도 순서가 안 뒤집힙니다. */ .is-playing.typing-done .fig--center{ animation: figIn var(--inDur) var(--easeOut) var(--afterTyping) both, drift 7s ease-in-out calc(var(--afterTyping) + var(--inDur)) infinite; } .is-playing .fig--center::after{animation:none} .is-playing.typing-done .fig--center::after{ animation:sweep var(--inDur) linear var(--afterTyping) both; } /* ========================================================= 가운데 그림 클릭 → 1·2번 그림이 다시 나왔다가 다음 페이지로 ========================================================= */ /* 영화 자막처럼 화면 아래 가운데에 뜨는 대사 */ .subtitle{ position:absolute;left:0;right:0;top:91.3%;z-index:9; text-align:center;font-size:21px;font-weight:500;letter-spacing:.005em;word-break:keep-all;white-space:pre-line; color:var(--ink);opacity:0;pointer-events:none; text-shadow:0 0 8px var(--paper), 0 0 5px var(--paper), 0 0 3px var(--paper), 0 0 2px var(--paper); } .can-enter .subtitle{animation:rise .9s var(--easeOut) .1s both;pointer-events:auto;cursor:pointer} .can-enter .subtitle:hover{color:var(--blue-deep)} /* 가운데 그림이 다 나타난 뒤에만 눌리게 됩니다 */ .can-enter .fig--center{pointer-events:auto;cursor:pointer} .enter-hint{ position:absolute;left:66%;top:82%;z-index:9; font-family:var(--mono);font-size:12px;letter-spacing:.26em; color:var(--ink);background:var(--blue);border:0; padding:7px 14px;cursor:pointer;opacity:0;pointer-events:none; } .can-enter .enter-hint{ pointer-events:auto; animation:rise .7s var(--easeOut) both, blink 2.6s ease-in-out .7s infinite; } .enter-hint:hover{background:var(--ink);color:var(--paper)} @keyframes blink{0%,100%{opacity:1}50%{opacity:.5}} /* 되돌아온 1·2번 그림 — 각자 화면 바깥쪽에서 안으로 밀려 들어옵니다 */ @keyframes returnFromRight{ 0% {opacity:0; clip-path:inset(0 0 0 100%); transform:translateX(46px)} 55% {opacity:1} 100%{opacity:1; clip-path:inset(0 0 0 0); transform:translateX(0)} } @keyframes returnFromLeft{ 0% {opacity:0; clip-path:inset(0 100% 0 0); transform:translateX(-46px)} 55% {opacity:1} 100%{opacity:1; clip-path:inset(0 0 0 0); transform:translateX(0)} } .is-playing.is-outro .fig--head{animation:returnFromRight .75s var(--easeOut) 0s both} .is-playing.is-outro .fig--left{animation:returnFromLeft .75s var(--easeOut) .35s both} /* 들어올 때 색 바가 한 번 쓸고 지나갑니다 */ .is-playing.is-outro .fig--head::after{animation:sweep .75s linear 0s both} .is-playing.is-outro .fig--left::after{animation:sweep .75s linear .35s both} .is-playing.is-outro .fig--center{animation:none;opacity:1} .is-outro .enter-hint{animation:none;opacity:0;transition:opacity .25s} /* 위·아래 띠가 커튼처럼 닫히며 다음 페이지로 */ .curtain{position:fixed;left:0;right:0;height:0;z-index:80;pointer-events:none} .curtain--top{top:0;background:var(--blue)} .curtain--bottom{bottom:0;background:var(--sage)} .is-leaving .curtain{animation:curtainIn .55s var(--easeIn) both} @keyframes curtainIn{from{height:0}to{height:51vh}} /* 다음 페이지에서 커튼이 열립니다 */ .curtains-open .curtain{animation:curtainOut .6s var(--easeOut) .05s both} @keyframes curtainOut{from{height:51vh}to{height:0}} /* ========================================================= 두 번째 페이지 (page2.html) 왼쪽 세로 색 띠에 정보, 오른쪽 넓은 면에 제목 + 손글씨 + 그림 ========================================================= */ /* ---- 왼쪽 세로 띠 ---- */ .p2side{ position:absolute;left:0;top:0;width:19%;height:74%;background:var(--sage);z-index:3; display:flex;flex-direction:column;align-items:center; padding:44px 0; /* 위아래 여백을 같게 → 내용 덩어리가 세로 한가운데 */ } /* 1115 · 세로 이름 · One year — 셋 다 가로 가운데로 놓입니다. padding 숫자를 키우면 위아래 여백이, GAP 숫자를 키우면 1115 와 세로 이름 사이가 벌어집니다. */ .p2side__stack{ --gap:46px; --badge-w:60%; /* 1115 원형의 너비 */ display:flex;flex-direction:column;align-items:center; width:100%;flex:1; } .p2side__badge{ width:var(--badge-w);padding:10px 0; border:1.6px solid var(--paper);border-radius:50%; text-align:center;color:var(--paper); font-family:var(--mono);font-size:15px;letter-spacing:.08em; } /* 세로 이름과 One year 의 왼쪽 끝을 1115 원형의 왼쪽 끝과 같은 x 에 맞춥니다 (원형이 가운데 있으므로 양옆 여백은 (100% - 너비) / 2) */ .p2side__namesbox, .p2side__note{ align-self:flex-start;margin-left:calc((100% - var(--badge-w)) / 2); } /* 돌린 글줄은 '제자리 폭'이 0 이라 다른 요소와 겹칩니다. 그래서 빈 상자를 하나 두고, 글자 크기에 맞춘 자리를 js 가 잡아줍니다. */ .p2side__namesbox{position:relative;display:block;margin-top:var(--gap)} .p2side__names{ /* 세로쓰기 모드 대신 '가로로 짠 글줄을 통째로 90도 회전'. 세로쓰기는 글자를 하나씩 세로축에 배치해서, 화면이 소수점 배율로 축소될 때 글자마다 반올림이 달라져 좌우로 흔들립니다. */ position:absolute;left:100%;top:0;width:max-content; transform-origin:0 0;rotate:90deg; white-space:pre-line;line-height:2.1; color:var(--paper);font-family:var(--mono);font-size:12px;letter-spacing:.28em; } .p2side__note{ margin-top:auto; /* 아래쪽에 붙입니다 (원래 자리) */ text-align:left;white-space:pre-line;line-height:1.95; color:var(--paper);font-family:var(--mono);font-size:12px;letter-spacing:.14em; } /* 녹색 칸(높이 74%) 아래, 아래 띠(30px) 위 — 그 흰 영역의 한가운데 */ .p2foot{ position:absolute;left:0;top:74%;width:19%;bottom:30px;z-index:4; display:flex;align-items:center;justify-content:center; /* 덩어리를 가운데로 */ } .p2foot__in{ display:flex;flex-direction:column;align-items:flex-start; /* 글끼리는 왼쪽 맞춤 */ gap:14px; } .p2mark{ color:var(--sage-deep); font-family:var(--mono);font-size:13px;letter-spacing:.12em; } .p2heading{ color:var(--sage-deep); font-family:var(--kr);font-weight:700;font-size:34px;line-height:1.32; letter-spacing:-.02em;white-space:pre-line;word-break:keep-all; } /* ---- 오른쪽 ---- */ /* 제목 + 아래 한 줄 묶음 : 간격은 .p2cap 의 margin-top 하나로 정해집니다 */ .p2head{position:absolute;left:22%;top:7%;z-index:5} .p2title{ white-space:pre-line; font-family:'Holtwood One SC',var(--jp);font-weight:400;font-size:104px;line-height:1.02; letter-spacing:-.015em;color:var(--ink); } .p2script{ position:absolute;left:29%;top:7.5%;width:40%;z-index:6;pointer-events:none; color:var(--blue-deep);rotate:-7deg;display:block; } .p2script__svg{width:100%;height:auto;display:block;overflow:visible} /* 그려지기 전에는 선이 숨어 있도록 (js 가 실제 길이로 다시 잡습니다) */ .p2script__pen path{stroke-dasharray:20000;stroke-dashoffset:20000} @keyframes drawStroke{to{stroke-dashoffset:0}} .p2cap{ margin-top:30px; font-size:16px;font-weight:500;word-break:keep-all;white-space:pre-line; } .p2cap span{ background:var(--blue);padding:4px 9px;line-height:1.95; box-decoration-break:clone;-webkit-box-decoration-break:clone; } /* ---- 본문 글 (칸보다 길면 스크롤) ---- */ .p2letter{ position:absolute;left:22%;top:calc(44% - 50px);width:48%;bottom:8.5%;z-index:5; overflow-y:auto;padding-right:20px; font-size:12.5px;line-height:2;word-break:keep-all;color:var(--ink); /* 아래쪽을 살짝 흐리게 해서 "더 있다"는 걸 알립니다 */ -webkit-mask-image:linear-gradient(180deg,#000 0,#000 88%,transparent 100%); mask-image:linear-gradient(180deg,#000 0,#000 88%,transparent 100%); scrollbar-width:thin;scrollbar-color:var(--sage) transparent; } /* ---- 가운데 글: 기호였다가 한 줄씩 본문이 드러납니다 ---- 조각(.sc) 안에는 처음부터 '진짜 글자'가 들어 있고, 투명하게 숨겨둡니다. 기호는 그 위에 겹쳐 그립니다. 그래서 기호가 무엇이든 글의 줄바꿈이 처음부터 끝까지 한 번도 흔들리지 않습니다. inline 을 유지해야 줄바꿈이 본문과 같으므로 움직임은 top 으로 줍니다. */ .p2letter .sc{position:relative;color:transparent; --dx:0px;--dy:42px;--rot:0deg} /* js 가 글자마다 다른 값을 넣습니다 */ .p2cue{display:inline} /* 일러스트를 부르는 문장 (보이는 변화 없음) */ .p2letter .sc::after{ content:attr(data-s); position:absolute;left:50%;top:50%;translate:-50% -50%; line-height:1;white-space:pre;color:var(--ink); } /* 벗겨질 때: 기호는 아래로 떨어지며 옅어져 사라지고(쌓이지 않습니다), 그 자리에 진짜 글자가 배어 나옵니다. --d 는 js 가 글자마다 넣어 주는 시차입니다. 한 줄 안에서 왼쪽부터 차례로 벗겨지게 하는 값입니다. */ .p2letter .sc--in{animation:scInk .34s ease-out 90ms both} .p2letter .sc--in::after{ animation:scDust 1.15s cubic-bezier(.2,.65,.35,1) forwards; } @keyframes scInk{from{color:transparent} to{color:var(--ink)}} /* 제자리에서 흩어져 멀리 날아가며 작아지고 옅어집니다 — 바닥에 쌓이지 않습니다 */ @keyframes scDust{ 0% {translate:-50% -50%; scale:1; rotate:0deg; opacity:.9} 100%{translate:calc(-50% + var(--dx)) var(--dy); scale:.22; rotate:var(--rot); opacity:0} } .p2letter p{margin-bottom:1.15em;text-indent:1em} /* 문단마다 첫 줄 들여쓰기 */ .p2letter p:last-child{margin-bottom:0} .p2letter::-webkit-scrollbar{width:4px} .p2letter::-webkit-scrollbar-track{background:transparent} .p2letter::-webkit-scrollbar-thumb{background:var(--sage)} /* 위·아래 띠 높이가 같으므로 캔버스 한가운데가 곧 두 띠 사이의 한가운데 */ /* left 는 js 가 'ANNIVERSARY' 오른쪽 여백 한가운데로 다시 잡습니다 (아래 값은 예비) */ .p2art{ position:absolute;left:72%;top:50%;translate:0 -50%;height:90%;width:auto;z-index:2;display:block; opacity:0; /* 편지의 그 문장이 읽힐 때 나타납니다 */ /* 아래에서 위로 '차오르며' 드러나게 하는 가림막. 그림 높이의 2.35배짜리 세로 그라데이션을 씌워 두고 위치만 움직입니다. 경계(43%~58%)가 그림 높이의 0.35배라, 위치가 0 → 100% 로 가는 동안 그 경계선이 그림 아래 끝에서 위 끝까지 꼭 한 번 훑고 지나갑니다. 평소 위치(100%)에서는 불투명한 부분만 걸쳐 그림이 그대로 보입니다. */ -webkit-mask-image:linear-gradient(to top,#000 0 43%,transparent 58%); mask-image:linear-gradient(to top,#000 0 43%,transparent 58%); -webkit-mask-size:100% 235%; mask-size:100% 235%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:0 100%; mask-position:0 100%; --rise:6.5s; /* ★ 등장이 끝나기까지 걸리는 시간. 이 숫자 하나만 바꾸면 됩니다 */ } /* 세 가지를 따로 겁니다. 차오르는 속도와 또렷해지는 속도가 서로 달라야 '천천히 차오르다 마지막에 딱 맺히는' 느낌이 납니다. */ .p2art.art-in{ animation:artRise var(--rise) cubic-bezier(.42,.08,.55,.98) both, artFocus var(--rise) cubic-bezier(.50,.05,.35,1) both, artFloat 9s ease-in-out var(--rise) infinite; } @keyframes artRise{ /* 발밑에서부터 차오릅니다 */ from{-webkit-mask-position:0 0; mask-position:0 0} to {-webkit-mask-position:0 100%;mask-position:0 100%} } @keyframes artFocus{ /* 흐릿하고 조금 큰 상태에서 또렷하게 내려앉습니다 */ 0% {opacity:0; translate:0 calc(-50% + 26px); scale:1.055; filter:blur(16px)} 14% {opacity:1} 55% {filter:blur(9px)} /* 또렷해지는 건 뒤로 미뤄, 마지막에 맺히게 */ 100%{opacity:1; translate:0 -50%; scale:1; filter:blur(0)} } @keyframes artFloat{ /* 자리를 잡은 뒤에는 아주 천천히 숨 쉬듯 */ 0%,100%{translate:0 -50%} 50% {translate:0 calc(-50% - 7px)} } @media (prefers-reduced-motion: reduce){ .p2art{opacity:1;animation:none} } /* ========================================================= 2페이지 등장 애니메이션 커튼이 열리는 0.65초 뒤부터 요소들이 차례로 들어옵니다. 순서를 바꾸려면 각 줄 끝의 시작 시각(초)만 고치면 됩니다. ========================================================= */ @keyframes slideFromLeft{from{transform:translateX(-100%)}to{transform:translateX(0)}} @keyframes wipeFromLeft{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}} @keyframes fadeIn{from{opacity:0}to{opacity:1}} .is-playing .p2side {animation:slideFromLeft .75s var(--easeOut) .50s both} .is-playing .p2title {animation:wipeFromLeft .85s var(--easeOut) .85s both} .is-playing .p2side__badge {animation:rise .70s var(--easeOut) 1.10s both} /* 세로 글자는 회전해 둔 상태라 자리를 건드리지 않는 흐려짐으로만 */ .is-playing .p2side__names {animation:fadeIn .70s var(--easeOut) 1.20s both} .is-playing .p2side__note {animation:rise .70s var(--easeOut) 1.30s both} /* 손글씨는 왼쪽부터 천천히 그어지듯 */ .is-playing .p2cap {animation:rise .70s var(--easeOut) 2.00s both} .is-playing .p2letter {animation:rise .80s var(--easeOut) 2.25s both} .is-playing .p2mark {animation:rise .70s var(--easeOut) 2.35s both} .is-playing .p2heading {animation:rise .70s var(--easeOut) 2.45s both} /* 움직임을 줄이는 설정을 켠 사용자 → 최종 화면만 */ @media (prefers-reduced-motion: reduce){ .is-playing .band--top, .is-playing .band--bottom,.is-playing .anim,.is-playing .fig, .is-playing .fig--center,.is-playing.typing-done .fig--center{animation:none} .band{transform:none} .anim{opacity:1} .letter-done .p2next{animation:none;opacity:1} /* 깜빡임 없이 그냥 보이게 */ .music-opening *{animation:none} /* 여는 화면도 바로 보이게 */ .music-opening__band{transform:none} .fig--center{opacity:1} .fig--head,.fig--left{display:none} .marquee__inner{animation:none} .p2script__pen path{stroke-dashoffset:0} .is-playing .p2side,.is-playing .p2title,.is-playing .p2side__badge, .is-playing .p2side__names,.is-playing .p2side__note,.is-playing .p2art, .is-playing .p2cap,.is-playing .p2letter, .is-playing .p2mark,.is-playing .p2heading{animation:none} .can-enter .enter-hint{animation:none;opacity:1;pointer-events:auto} .is-outro .fig--head,.is-outro .fig--left{animation:none;opacity:1;display:block} .is-leaving .curtain{animation:none;height:51vh} }