@font-face{font-family:Nanum Pen Script;src:url(/fonts/NanumPenScript-Regular.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}:root{--ink: #404040;--ink-soft: #3d5a4c;--paper: #f3efe6;--paper-edge: #e4dcc8;--bg: #ffffff;--text: #404040;--text-muted: rgba(28, 47, 58, .55);--text-faint: rgba(28, 47, 58, .4);--line: rgba(28, 47, 58, .12);--line-strong: rgba(28, 47, 58, .22);--surface: rgba(28, 47, 58, .04);--surface-hover: rgba(28, 47, 58, .07);--accent: #404040;--control-bg: rgba(255, 255, 255, .88);--control-edge: rgba(28, 47, 58, .1);--radius: 18px;--font-display: "Instrument Serif", Georgia, serif;--font-ui: "Outfit", "Apple SD Gothic Neo", sans-serif;--font-hand: "Nanum Pen Script", "Apple SD Gothic Neo", sans-serif;--letter-cream: #f6efe6;--letter-paper-ratio: 768 / 1152;--letter-paper-img: url(/write_paper.jpg);--letter-paper-base: var(--letter-cream);--letter-paper: var(--letter-paper-img) center / contain no-repeat, var(--letter-cream)}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;min-height:100%;height:100%}body{font-family:var(--font-ui);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}#app{min-height:100%;height:100%}.app{--player-h: 88px;min-height:100%;height:100%;display:grid;grid-template-rows:1fr auto;position:relative;overflow:hidden;background:var(--bg)}.app:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:.25;z-index:0;background-image:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.02) 2px,rgba(0,0,0,.02) 3px)}.bg-orbs{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;overflow:hidden}.bg-orb{position:absolute;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffbac8b3,#e88ca859 42%,#c8648200 72%);filter:blur(48px);opacity:.45;will-change:transform}.bg-orb-a{width:min(52vw,420px);height:min(52vw,420px);top:-8%;left:-6%;animation:orb-drift-a 22s ease-in-out infinite alternate}.bg-orb-b{width:min(48vw,380px);height:min(48vw,380px);right:-10%;bottom:8%;opacity:.38;filter:blur(56px);animation:orb-drift-b 28s ease-in-out infinite alternate}@keyframes orb-drift-a{0%{transform:translate(0) scale(1)}50%{transform:translate(18vw,14vh) scale(1.12)}to{transform:translate(8vw,28vh) scale(.94)}}@keyframes orb-drift-b{0%{transform:translate(0) scale(1.05)}50%{transform:translate(-16vw,-12vh) scale(.9)}to{transform:translate(-22vw,6vh) scale(1.1)}}@media (prefers-reduced-motion: reduce){.bg-orb{animation:none}}.stage{position:relative;z-index:1;display:grid;place-items:center;padding:32px 20px calc(var(--player-h) + 28px);overflow:auto}.home-link{display:inline-flex;align-items:center;align-self:flex-start;margin-bottom:8px;color:var(--text-muted);font-family:var(--font-ui);font-size:.88rem;font-weight:500;text-decoration:none;transition:color .2s ease}.home-link:hover{color:var(--text)}.home-link-footer{align-self:center;margin:8px 0 0;padding-top:8px}.compose{width:min(560px,100%);display:flex;flex-direction:column;gap:28px;animation:rise-in .9s cubic-bezier(.22,1,.36,1) both}.paper-wrap>.home-link{margin-bottom:16px}.brand{display:flex;flex-direction:column;gap:10px}.brand-mark{display:inline-flex;align-items:baseline;gap:12px}.brand-name{font-family:var(--font-display);font-size:clamp(3.4rem,10vw,5.2rem);font-weight:400;line-height:.92;letter-spacing:-.02em;color:var(--text);margin:0}.brand-name em{font-style:italic;color:#1c2f3a73}.brand-tag{margin:0;max-width:22em;font-weight:300;font-size:1.05rem;line-height:1.55;color:var(--text-muted)}.letter-form{display:flex;flex-direction:column;gap:14px}.letter-form label{font-size:.78rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint)}.letter-title{width:100%;height:36px;padding:0 14px;border:1px solid rgba(160,130,110,.28);border-radius:8px;background:#ffffffb8;color:var(--ink);font-family:var(--font-display);font-size:1.05rem;line-height:36px;outline:none;transition:border-color .25s ease,box-shadow .25s ease}.letter-title::placeholder{color:#1c2f3a59;font-style:italic}.letter-title:focus{border-color:#1c2f3a47;box-shadow:0 0 0 3px #e88ca833}.tag-toolbar{display:flex;flex-direction:column;gap:8px}.tag-toolbar-label{font-size:.78rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint)}.tag-chips{display:flex;flex-wrap:wrap;gap:8px}.tag-chip{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--line-strong);background:#fff;color:var(--text);font-family:var(--font-ui);font-size:.82rem;font-weight:500;padding:8px 14px;border-radius:999px;cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease}.tag-chip:hover{border-color:#e88ca88c;background:#ffbac824}.tag-chip[data-open="[특수]"]{border-color:#ff6b8a59;color:#c44569}.tag-chip[data-open="[특수]"]:hover{background:#ff6b8a1f}.fx-hearts{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;pointer-events:none}.tag-hint{margin:0;font-size:.78rem;line-height:1.45;color:var(--text-faint)}.tag-hint code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.74rem;padding:1px 5px;border-radius:4px;background:#1c2f3a0f;color:var(--text-muted)}.letter-form textarea{width:100%;aspect-ratio:var(--letter-paper-ratio);min-height:0;resize:vertical;padding:12% 14% 10%;border:1px solid rgba(160,130,110,.28);border-radius:6px 14px 10px 8px;background:var(--letter-paper);color:var(--ink);font-family:var(--font-display);font-size:1.35rem;line-height:32px;box-shadow:0 18px 40px #1c2f3a14,inset 0 1px #ffffff8c;outline:none;transition:border-color .25s ease,box-shadow .25s ease}.letter-form textarea::placeholder{color:#1c2f3a59;font-style:italic}.letter-form textarea:focus{border-color:#1c2f3a47;box-shadow:0 20px 48px #1c2f3a1a,0 0 0 3px #e88ca833,inset 0 1px #ffffff8c}.actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}#btn-write{margin-top:20px;margin-bottom:20px}.save-status{margin:0;font-size:.82rem;line-height:1.4;color:var(--text-muted)}.save-status.is-error{color:#b42318}.saved-letters{display:flex;flex-direction:column;gap:10px;margin-bottom:8px;padding-bottom:22px;border-bottom:1px solid var(--line)}.saved-title{margin:0;font-family:var(--font-display);font-size:1.45rem;font-weight:400;letter-spacing:-.02em;color:var(--text)}.saved-hint,.saved-empty{margin:0;font-size:.86rem;line-height:1.45;color:var(--text-faint)}.saved-list{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}.saved-row{display:flex;align-items:stretch;gap:8px}.saved-item{flex:1;min-width:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--line);background:var(--surface);color:var(--text);text-align:left;padding:12px 14px;border-radius:10px;cursor:pointer;display:flex;flex-direction:column;gap:4px;font-family:var(--font-ui);text-decoration:none;transition:background .2s ease,border-color .2s ease}.saved-item:hover{background:var(--surface-hover);border-color:var(--line-strong)}.saved-load{flex-shrink:0;align-self:center;padding:8px 14px;font-size:.82rem;border-radius:999px}.saved-preview{font-size:.95rem;font-weight:500;line-height:1.4}.saved-meta{font-size:.78rem;color:var(--text-faint)}.style-picker{margin:0;padding:0;border:none}.style-picker legend{padding:0;margin-bottom:10px;font-size:.78rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint)}.style-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}.style-option{position:relative;display:flex;flex-direction:column;gap:4px;padding:14px 14px 16px;border-radius:14px;border:1px solid var(--line);background:var(--surface);cursor:pointer;transition:border-color .2s ease,background .2s ease,transform .15s ease}.style-option input{position:absolute;opacity:0;pointer-events:none}.style-option:hover{border-color:var(--line-strong);background:var(--surface-hover)}.style-option.is-active{border-color:#e88ca88c;background:#ffbac824;box-shadow:inset 0 0 0 1px #e88ca81f}.style-title{font-size:.95rem;font-weight:500;color:var(--text)}.style-desc{font-size:.78rem;line-height:1.4;color:var(--text-muted)}@media (max-width: 560px){.style-options{grid-template-columns:1fr}}.toolbar-style{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.style-chip{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--line-strong);background:transparent;color:var(--text-muted);font-family:var(--font-ui);font-size:.78rem;font-weight:500;padding:8px 12px;border-radius:999px;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease}.style-chip:hover{border-color:#1c2f3a59;color:var(--text)}.style-chip.is-active{background:var(--accent);border-color:transparent;color:#fff}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;font-family:var(--font-ui);font-size:.95rem;font-weight:500;letter-spacing:.01em;border-radius:999px;padding:14px 26px;transition:transform .2s ease,background .2s ease,opacity .2s ease}.btn:active{transform:scale(.98)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{background:var(--accent);color:#fff;box-shadow:0 10px 28px #1c2f3a29}.btn-primary:hover:not(:disabled){background:#2a4554}.btn-ghost{background:transparent;color:var(--text-muted);border:1px solid var(--line-strong)}.btn-ghost:hover:not(:disabled){background:var(--surface);color:var(--text)}.app--play{background:var(--letter-cream)}.app--play:before{display:none}.app--play .bg-orbs{display:none}.app--play .stage{place-items:stretch;padding:0;overflow:auto}.play-view{width:100%;min-height:100%;display:flex;flex-direction:column;animation:paper-settle .85s cubic-bezier(.22,1,.36,1) both}.play-header{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:center;min-height:64px;padding:16px 24px;border-bottom:1px solid rgba(160,130,110,.18);background:linear-gradient(180deg,#f6efe6f5,#f6efe6e0);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.play-title{margin:0;max-width:min(720px,100%);font-family:var(--font-hand);font-size:clamp(1.85rem,5vw,2.6rem);font-weight:400;letter-spacing:.01em;line-height:1.2;text-align:center;color:var(--ink)}.play-sheet{position:relative;width:100%;margin:0 auto;padding:0 12px calc(var(--player-h) + 24px);flex:1;overflow:hidden;display:flex;flex-direction:column;align-items:center}.play-sheet:has(.play-pager:not([hidden])){padding-bottom:calc(var(--player-h) + 48px)}.play-pages{position:relative;width:min(720px,calc(100vw - 48px));aspect-ratio:var(--letter-paper-ratio);margin:0 auto;overflow:hidden;touch-action:pan-y;--page-turn-ms: 1.52s}.play-paper{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;overflow:hidden;pointer-events:none;aspect-ratio:var(--letter-paper-ratio);background:var(--letter-paper-img) center top / 100% auto no-repeat;background-color:var(--letter-cream);box-shadow:0 18px 50px #1c2f3a1a,0 1px #ffffff73 inset;transform:translateZ(0) rotate(0);transition:none;z-index:1}.play-paper.is-waiting{z-index:0}.play-paper.is-active{z-index:2}.play-paper.is-turned{z-index:3;transform:translate3d(110%,0,0) rotate(6deg)}.play-pages.is-animating .play-paper{transition:transform var(--page-turn-ms) ease-in-out}.play-pager{margin:12px 0 0;font-family:var(--font-ui);font-size:.82rem;font-weight:500;letter-spacing:.06em;color:var(--text-muted)}.play-pager[hidden]{display:none}.play-paper canvas{position:relative;z-index:2;display:block;width:100%;height:auto;vertical-align:top;background:transparent}.loading{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#f3efe6b8;color:var(--ink-soft);font-family:var(--font-ui);font-size:.95rem;z-index:4}.loading[hidden]{display:none}.paper-wrap{width:min(720px,100%)}.paper{position:relative;aspect-ratio:var(--letter-paper-ratio);border-radius:4px 12px 10px 8px;border:1px solid rgba(160,130,110,.22);background:var(--letter-paper);box-shadow:0 1px #ffffff80 inset,0 18px 50px #1c2f3a1a;overflow:hidden}.player{position:fixed;left:0;right:0;bottom:0;z-index:10;height:var(--player-h);padding:14px 18px 18px;background:var(--control-bg);border-top:1px solid var(--control-edge);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);display:grid;grid-template-columns:auto 1fr auto;gap:16px 20px;align-items:center;transform:translateY(110%);transition:transform .45s cubic-bezier(.22,1,.36,1)}.player.visible{transform:translateY(0)}.player-controls{display:flex;align-items:center;gap:8px}.icon-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid transparent;background:var(--surface);color:var(--text);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;transition:background .2s ease,border-color .2s ease,transform .15s ease}.icon-btn:hover{background:var(--surface-hover)}.icon-btn:active{transform:scale(.95)}.icon-btn.primary{background:var(--accent);color:#fff;width:50px;height:50px}.icon-btn.primary:hover{background:#2a4554}.icon-btn svg{width:20px;height:20px;fill:currentColor}.icon-btn.primary svg{width:22px;height:22px}.scrub{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;min-width:0}.time{font-variant-numeric:tabular-nums;font-size:.8rem;font-weight:400;color:var(--text-faint);min-width:3.2em}.time.end{text-align:right}.seek{--seek-track-h: 6px;--seek-thumb-size: 16px;-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:var(--seek-thumb-size);margin:0;background:transparent;outline:none;cursor:pointer}.seek::-webkit-slider-runnable-track{height:var(--seek-track-h);border-radius:999px;background:#1c2f3a1f}.seek::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:var(--seek-thumb-size);height:var(--seek-thumb-size);margin-top:calc((var(--seek-track-h) - var(--seek-thumb-size)) / 2);border:none;border-radius:50%;background:var(--accent);box-shadow:0 2px 8px #1c2f3a33;cursor:grab}.seek::-moz-range-track{height:var(--seek-track-h);border:none;border-radius:999px;background:#1c2f3a1f}.seek::-moz-range-thumb{width:var(--seek-thumb-size);height:var(--seek-thumb-size);border:none;border-radius:50%;background:var(--accent);box-shadow:0 2px 8px #1c2f3a33;cursor:grab}.meta{display:none;font-size:.78rem;color:var(--text-faint);white-space:nowrap}@media (min-width: 720px){.meta{display:block}.player{grid-template-columns:auto 1fr auto;padding-inline:28px}}@keyframes rise-in{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes paper-settle{0%{opacity:0;transform:translateY(24px) rotate(-.6deg)}to{opacity:1;transform:translateY(0) rotate(0)}}@media (min-width: 900px){.app--play{--play-header-h: 64px}.app--play .play-view{height:100%;min-height:0;overflow:hidden}.app--play .play-header{min-height:var(--play-header-h);flex-shrink:0}.app--play .play-sheet{overflow-x:hidden;overflow-y:hidden;padding-bottom:calc(var(--player-h) + 12px)}.app--play .play-sheet:has(.play-pager:not([hidden])){padding-bottom:calc(var(--player-h) + 36px)}.app--play .play-pages{width:auto;height:min(calc(100dvh - var(--play-header-h) - var(--player-h) - 24px),1080px);max-width:min(720px,calc(100vw - 48px));aspect-ratio:var(--letter-paper-ratio)}.app--play .play-paper{width:100%;height:100%;max-width:none}.app--play .play-paper canvas{width:100%;height:100%}}@media (max-width: 560px){.stage{padding:20px 14px calc(var(--player-h) + 20px)}.brand-name{font-size:3rem}.app--play .play-sheet{padding-left:0;padding-right:0}.app--play .play-pages{width:100vw;max-width:none;height:auto;aspect-ratio:var(--letter-paper-ratio)}.app--play .play-paper{width:100%;height:100%;max-width:none}.app--play .play-paper canvas{width:100%;height:100%}.player{--player-h: 96px;grid-template-columns:1fr;grid-template-rows:auto auto;gap:10px;height:auto;padding-bottom:max(14px,env(safe-area-inset-bottom))}.player-controls{justify-content:center}.meta{display:none}}