:root { --ink:#344362; --paper:#fffdf7; --cream:#fff0bf; --accent:#4c9de0; --muted:#71809d; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; color:var(--ink); background:#f8e8c3; font-family:Pretendard,Arial,sans-serif; }
[hidden] { display:none !important; }
button,textarea { font:inherit; }
button { cursor:pointer; }
.welcome-screen { min-height:100vh; display:grid; place-items:center; padding:28px 18px; background:radial-gradient(circle at 14% 10%, #fff9dc 0 5%, transparent 30%), radial-gradient(circle at 86% 87%, #a8d7ff 0 2%, transparent 27%), linear-gradient(135deg,#fff0be,#fff9e7 48%,#d9efff); }
.welcome-card { width:min(100%,460px); position:relative; overflow:hidden; padding:50px 38px 35px; text-align:center; border:1px solid rgba(255,255,255,.88); border-radius:34px; background:rgba(255,254,248,.86); box-shadow:0 24px 60px rgba(57,103,151,.18), inset 0 1px rgba(255,255,255,.95); }.welcome-card::before { content:''; position:absolute; width:260px; height:260px; left:-160px; top:-156px; border:1px solid #f2cf6c; border-radius:50%; opacity:.65; }.welcome-card > * { position:relative; z-index:1; }.logo-ring { width:138px; height:138px; padding:7px; margin:0 auto 26px; border-radius:50%; background:linear-gradient(135deg,#f5c45d 0%,#fff2bd 42%,#72baf0 100%); box-shadow:0 13px 25px rgba(60,128,186,.24); animation:gentleBob 3.5s ease-in-out infinite; }.logo-ring img { display:block; width:100%; height:100%; object-fit:cover; border:4px solid #fffdf6; border-radius:50%; }.welcome-card h1 { margin:13px 0 15px; font:400 34px/1.42 'Gowun Batang',serif; letter-spacing:-.07em; }.welcome-card h1 em { color:#348dd1; font-style:normal; }.welcome-card p:not(.eyebrow) { margin:0; color:#71809c; font-size:14px; line-height:1.75; }.start-login { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; margin:27px 0 15px; padding:16px; border:0; border-radius:17px; color:#fff; background:linear-gradient(135deg,#5db4ed,#358cd1); box-shadow:0 9px 17px rgba(53,140,209,.24); font-size:14px; font-weight:700; transition:.2s; }.start-login:hover { transform:translateY(-2px); box-shadow:0 12px 20px rgba(53,140,209,.29); }.google-g { display:grid; place-items:center; width:21px; height:21px; border-radius:50%; color:#4285f4; background:#fff; font-size:13px; font-weight:700; }.welcome-card small { color:#8997ae; font-size:11px; }.sparkle { position:absolute; color:#4aa4e5; font-size:20px; }.sparkle-one { top:58px; right:62px; }.sparkle-two { left:55px; bottom:66px; color:#f1bb44; font-size:16px; }
.grain { position:fixed; inset:0; pointer-events:none; opacity:.22; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E"); z-index:2; }
.page-shell { max-width:1200px; margin:auto; padding:27px 40px 72px; position:relative; }
.site-header { display:flex; align-items:center; justify-content:space-between; position:relative; z-index:3; }
.brand { display:flex; gap:10px; align-items:center; color:var(--ink); text-decoration:none; font:600 15px 'Gowun Batang',serif; letter-spacing:.05em; }
.brand-mark { display:grid; place-items:center; width:31px; height:31px; overflow:hidden; border:2px solid #fffdf2; border-radius:50%; box-shadow:0 1px 5px #a6cff0; }.brand-mark img { width:100%; height:100%; object-fit:cover; }
.account-area { position:relative; }.account-button { display:flex; align-items:center; gap:8px; padding:9px 14px; border:1px solid #b7daf4; border-radius:99px; color:#456a91; background:rgba(248,253,255,.72); font-size:13px; transition:.2s; }
.account-button:hover { background:#f3fbff; transform:translateY(-1px); }.account-dot { width:8px; height:8px; border-radius:50%; background:#f0c55b; }.account-button.is-logged .account-dot { background:#5aafe6; }
.account-menu { position:absolute; top:calc(100% + 9px); right:0; z-index:8; width:158px; padding:6px; border:1px solid #d6e9f8; border-radius:16px; background:#fffefa; box-shadow:0 12px 26px rgba(58,118,165,.17); }.account-menu button { display:block; width:100%; padding:10px 11px; border:0; border-radius:10px; color:#50708e; background:transparent; text-align:left; font-size:12px; }.account-menu button:hover { color:#287fc1; background:#eef8fe; }.account-menu #logoutButton { color:#d06d5e; }.account-menu #logoutButton:hover { background:#fff1ed; }
.hero { text-align:center; padding:64px 0 64px; position:relative; }.eyebrow,.info-kicker { margin:0; letter-spacing:.16em; color:#529cce; font-size:10px; font-weight:700; }.hero h1 { margin:15px 0; font:400 clamp(36px,4.8vw,61px)/1.36 'Gowun Dodum',sans-serif; letter-spacing:-.075em; }.hero h1 em { color:#3e92d0; font-style:normal; }.hero-copy { margin:0; color:#71809a; font-size:14px; line-height:1.9; }.open-period { display:inline-flex; align-items:center; gap:7px; margin:19px 0 0; padding:8px 14px; border:1px solid #c6e4f6; border-radius:99px; color:#4a83af; background:rgba(245,252,255,.7); font-size:12px; }.open-period span { color:#f0bc46; font-size:13px; }.hero-logo { width:92px; height:92px; margin:0 auto 20px; padding:5px; overflow:hidden; border-radius:50%; background:linear-gradient(135deg,#ffe49a,#9bd5fb); box-shadow:0 12px 28px rgba(66,151,212,.2); }.hero-logo img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.letter-area { display:grid; grid-template-columns:340px 1fr; gap:22px; align-items:stretch; }.info-card { padding:35px 35px 27px; min-height:480px; position:relative; overflow:hidden; color:#f9fcff; background:linear-gradient(155deg,#4b9eda,#3975af); border-radius:27px; box-shadow:8px 11px 0 #ebca75; }.info-card::after { content:''; position:absolute; width:220px; height:220px; border:1px solid rgba(255,255,255,.2); border-radius:50%; right:-104px; bottom:-100px; }.wax-seal { display:grid; place-items:center; width:43px; height:43px; margin-bottom:28px; border-radius:50%; background:#f5bd4e; color:#fffdf4; font:700 20px Georgia,serif; box-shadow:inset 0 0 0 3px rgba(255,255,255,.22); }.info-kicker { color:#fff0ae; }.info-card h2 { margin:10px 0 31px; font:400 24px/1.55 'Gowun Dodum',sans-serif; letter-spacing:-.045em; }.rules-list { list-style:none; padding:0; margin:0; border-top:1px solid rgba(255,255,255,.24); }.rules-list li { display:flex; align-items:center; gap:13px; padding:13px 0; border-bottom:1px solid rgba(255,255,255,.19); color:#f6fbff; font-size:12px; }.rules-list span { color:#ffdd75; font-size:10px; }.ticket { position:absolute; bottom:25px; right:28px; color:#e8f5ff; }.ticket strong { font:400 39px/1 Georgia,serif; color:#fff4b6; }.ticket small { font-size:12px; }
.letter-card { position:relative; display:flex; flex-direction:column; min-height:480px; padding:33px 39px 28px; background:var(--paper); border-radius:27px; box-shadow:10px 12px 0 #efd17e; }.letter-card::before { content:''; position:absolute; inset:11px; border:1px solid #d2e8f8; border-radius:19px; pointer-events:none; }.letter-topline,.letter-bottom,.send-button,textarea { position:relative; z-index:1; }.letter-topline { display:flex; justify-content:space-between; color:#91a0b5; font:700 10px Pretendard,sans-serif; letter-spacing:.13em; }.letter-topline span:first-child { color:#4a9ed9; }textarea { flex:1; resize:none; width:100%; padding:26px 3px; border:0; outline:0; background:transparent; color:#3b5574; font:400 17px/2 'Gowun Batang',serif; letter-spacing:-.03em; }textarea::placeholder { color:#a7b7c9; }.letter-bottom { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; padding-top:14px; border-top:1px solid #dcecf8; }.author-settings { display:flex; align-items:center; gap:14px; }.sender-name-control { display:flex; align-items:center; gap:8px; color:#71849d; font-size:12px; white-space:nowrap; }.sender-name-control input { width:116px; padding:7px 10px; border:1px solid #cfe5f5; border-radius:10px; outline:none; color:#4d6a88; background:#fafdff; font-size:12px; }.sender-name-control input:focus { border-color:#63afe4; box-shadow:0 0 0 3px #e9f6fe; }.sender-name-control input:disabled { color:#a1b2c3; background:#eef4f8; }.privacy-control { display:flex; align-items:center; gap:4px; }.privacy-label { margin-right:3px; color:#71849d; font-size:12px; }.privacy-option { border:0; border-radius:99px; padding:6px 10px; color:#8293a8; background:transparent; font-size:12px; }.privacy-option.is-selected { color:#277dc0; background:#e0f1fc; font-weight:700; }.counter { padding-bottom:7px; color:#9aabbe; font-size:12px; white-space:nowrap; }.counter b { color:#3e94d1; }.send-button { display:flex; align-items:center; justify-content:center; gap:20px; width:100%; margin-top:20px; padding:15px; border:0; border-radius:15px; background:linear-gradient(135deg,#62b7ee,#368bd0); color:#fff; font-weight:600; transition:.2s; }.send-button:hover { background:#3184c8; transform:translateY(-2px); box-shadow:0 5px 0 #efcf79; }.send-button:disabled { cursor:not-allowed; background:#aab8c6; box-shadow:none; transform:none; }
.modal-backdrop { position:fixed; inset:0; display:grid; place-items:center; padding:18px; z-index:10; background:rgba(49,95,139,.4); backdrop-filter:blur(5px); }.modal-backdrop[hidden] { display:none; }.login-modal { width:min(100%,425px); position:relative; padding:45px 35px 31px; text-align:center; color:#3c5876; border-radius:28px; background:#fffef9; box-shadow:0 20px 50px rgba(44,102,149,.25); }.close-modal { position:absolute; top:12px; right:16px; padding:2px 8px; border:0; background:transparent; color:#7890a6; font-size:25px; }.google-icon { display:grid; place-items:center; width:42px; height:42px; margin:0 auto 20px; border-radius:50%; color:#4285f4; background:#fff; box-shadow:0 1px 7px #cfe2ef; font-weight:700; }.login-modal h2 { margin:12px 0; font:400 27px/1.5 'Gowun Dodum',sans-serif; letter-spacing:-.045em; }.login-modal p:not(.eyebrow) { color:#71839c; font-size:13px; line-height:1.7; }.google-login { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; margin:24px 0 14px; padding:13px; border:1px solid #cbe5f6; border-radius:14px; background:#fff; color:#426180; font-size:14px; font-weight:600; }.google-login span { color:#4285f4; font-size:18px; font-weight:700; }.login-modal small { color:#99aabd; font-size:10px; }
.sent-modal-backdrop { z-index:15; background:rgba(35,76,113,.34); }.sent-letter-modal { width:min(100%,580px); position:relative; padding:34px 33px 29px; border-radius:30px; background:#eef9ff; box-shadow:0 25px 70px rgba(24,67,108,.3); }.sent-modal-head { text-align:center; }.sent-modal-head h2 { margin:8px 0 20px; color:#426f99; font:400 25px 'Gowun Dodum',sans-serif; letter-spacing:-.05em; }.sent-letter-paper { min-height:350px; display:flex; flex-direction:column; padding:28px 31px 24px; border:1px solid #d7eafa; border-radius:18px; background:#fffefa; box-shadow:0 9px 20px rgba(74,129,169,.12); }.sent-letter-paper.is-empty { justify-content:center; text-align:center; }.sent-letter-top { display:flex; justify-content:space-between; margin:0; padding-bottom:15px; border-bottom:1px solid #d8eaf7; color:#4b9fd9; font:700 10px Pretendard,Arial,sans-serif; letter-spacing:.12em; }.sent-letter-top span { color:#9daec0; font-weight:500; }.sent-letter-content { flex:1; padding:24px 1px; white-space:pre-wrap; color:#496482; font:400 16px/2 'Gowun Batang',serif; }.is-empty .sent-letter-content { flex:none; color:#8a9eb1; }.sent-letter-footer { display:flex; justify-content:space-between; padding-top:14px; border-top:1px solid #d8eaf7; color:#8b9eb3; font-size:11px; }.sent-letter-footer span:first-child { color:#5597c6; }.letter-navigation { display:flex; align-items:center; justify-content:center; gap:17px; margin-top:18px; color:#6b92b1; font-size:12px; }.letter-navigation button { display:grid; place-items:center; width:31px; height:31px; border:1px solid #c6e2f5; border-radius:50%; color:#408dca; background:#fff; font-size:15px; }.letter-navigation button:hover { color:#fff; background:#57a8df; }
.mail-scene { position:fixed; inset:0; z-index:20; display:none; place-items:center; overflow:hidden; background:rgba(39,105,157,.29); backdrop-filter:blur(4px); }.mail-scene.is-active { display:grid; }.mail-scene p { position:absolute; top:63%; padding:12px 21px; border-radius:99px; color:#477fae; background:rgba(255,255,250,.94); box-shadow:0 10px 28px rgba(47,113,163,.19); font:400 22px 'Gowun Dodum',sans-serif; opacity:0; animation:showText .45s 1.05s forwards; }.flying-plane { position:absolute; z-index:3; width:116px; height:84px; opacity:0; filter:drop-shadow(6px 11px 7px rgba(42,100,150,.25)); animation:planeFly 1.55s cubic-bezier(.2,.74,.35,1) forwards; }.flying-plane::before { content:''; position:absolute; inset:0; clip-path:polygon(2% 45%, 98% 0, 60% 100%, 43% 62%); background:linear-gradient(145deg,#fffdf2 0 52%,#d8edfb 53% 100%); }.flying-plane::after { content:''; position:absolute; top:20px; left:31px; width:66px; height:44px; clip-path:polygon(0 0,100% 0,20% 100%); background:#8fc9f1; opacity:.9; }.flying-plane span { position:absolute; z-index:1; top:20px; left:7px; width:88px; height:28px; clip-path:polygon(0 0,100% 0,45% 100%); background:#f7d46e; }.flight-trail { position:absolute; z-index:1; width:9px; height:9px; border-radius:50%; background:#ffe08a; opacity:0; box-shadow:-36px 12px 0 -1px #fff5bc,-72px 25px 0 -2px #8fcef3,-115px 42px 0 -3px #fff7cb,-163px 66px 0 -3px #9ed8f9; animation:trailFly 1.35s .18s ease-out forwards; }
.toast { position:fixed; left:50%; bottom:26px; z-index:30; max-width:calc(100% - 34px); padding:12px 17px; border-radius:99px; color:#fff9ef; background:#3f3028; font-size:13px; opacity:0; transform:translate(-50%,15px); transition:.25s; pointer-events:none; }.toast.is-visible { opacity:1; transform:translate(-50%,0); }
.sr-only { position:absolute; width:1px; height:1px; clip:rect(0,0,0,0); overflow:hidden; white-space:nowrap; } @keyframes gentleBob { 50% { transform:translateY(-7px) rotate(2deg); } } @keyframes planeFly { 0% { opacity:0; transform:translate(-57vw,30vh) rotate(-13deg) scale(.5); } 12% { opacity:1; } 58% { opacity:1; transform:translate(3vw,-4vh) rotate(-23deg) scale(1); } 100% { opacity:0; transform:translate(58vw,-35vh) rotate(-31deg) scale(.62); } } @keyframes trailFly { 0% { opacity:0; transform:translate(-42vw,21vh); } 20%,68% { opacity:1; } 100% { opacity:0; transform:translate(30vw,-18vh); } } @keyframes showText { to { opacity:1; } }
@media (max-width:720px) { .welcome-card { padding:43px 27px 30px; border-radius:28px; }.welcome-card h1 { font-size:31px; }.logo-ring { width:124px; height:124px; }.page-shell { padding:20px 18px 50px; }.brand { font-size:13px; }.account-button { padding:8px 10px; font-size:12px; }.hero { padding:52px 3px 48px; }.hero h1 { font-size:39px; }.hero-copy { font-size:13px; }.desktop-only { display:none; }.letter-area { grid-template-columns:1fr; }.info-card { min-height:313px; padding:27px; }.info-card h2 { margin-bottom:20px; }.ticket { bottom:25px; }.letter-card { min-height:450px; padding:28px 25px 22px; }.letter-bottom { align-items:flex-start; gap:12px; }.author-settings { align-items:flex-start; flex-direction:column; gap:8px; }.privacy-control { flex-wrap:wrap; }.privacy-label { width:auto; }.counter { padding-top:8px; }.mail-scene p { font-size:19px; } }