@font-face {
  font-family: "Pretendard";
  src: url("./assets/vendor/PretendardVariable.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 45 920;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #f1f1ef;
  --panel: #f8f8f6;
  --paper: #ffffff;
  --ink: #111111;
  --muted: #777772;
  --line: #d9d9d4;
  --accent: #ff4f2e;
  --dark: #111111;
  --shadow: 0 24px 70px rgba(0, 0, 0, .1);
  --ease: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }
html { min-width: 320px; }
body { margin: 0; color: var(--ink); background: var(--bg); font-family: Pretendard, "Apple SD Gothic Neo", sans-serif; font-synthesis: none; text-rendering: optimizeLegibility; }
button, input, textarea, select { color: inherit; font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin-top: 0; word-break: keep-all; }
svg { width: 18px; height: 18px; stroke-width: 1.8; }
[hidden] { display: none !important; }

.topbar { position: relative; z-index: 10; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 72px; padding: 0 28px; background: rgba(248,248,246,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px); }
.brand { display: flex; align-items: center; width: fit-content; gap: 9px; }
.brand-mark { display: grid; width: 31px; height: 31px; place-items: center; color: #fff; background: var(--dark); border-radius: 7px; font-size: 13px; font-weight: 800; letter-spacing: -.05em; }
.brand-name { font-size: 16px; font-weight: 750; letter-spacing: -.04em; }
.brand-tag { margin-left: 4px; color: #a2a29c; font-size: 9px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.progress { display: flex; align-items: center; gap: 11px; color: #a0a09a; font-size: 10px; font-weight: 650; }
.progress span { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.progress b { display: grid; width: 19px; height: 19px; place-items: center; border: 1px solid #d0d0cb; border-radius: 50%; font-size: 8px; }
.progress i { width: 26px; height: 1px; background: #d7d7d2; }
.progress .is-active { color: var(--ink); }.progress .is-active b { color: #fff; background: var(--accent); border-color: var(--accent); }
.header-action { display: flex; justify-self: end; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; color: #fff; background: var(--dark); border: 0; border-radius: 7px; font-size: 11px; font-weight: 700; transition: transform 180ms var(--ease), background 180ms ease; }
.header-action:hover { background: var(--accent); transform: translateY(-1px); }

.studio { display: grid; grid-template-columns: 360px minmax(0, 1fr); min-height: calc(100vh - 72px); }
.control-panel { position: relative; z-index: 2; padding: 40px 27px 24px; background: var(--panel); border-right: 1px solid var(--line); }
.eyebrow { margin-bottom: 14px; color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: .17em; }
.panel-heading h1 { margin-bottom: 14px; font-size: 31px; font-weight: 760; line-height: 1.22; letter-spacing: -.055em; }
.panel-heading > p:last-child { max-width: 285px; margin-bottom: 29px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.tab { position: relative; padding: 0 0 13px; color: #999993; background: transparent; border: 0; font-size: 11px; font-weight: 700; }
.tab.is-active { color: var(--ink); }.tab.is-active::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--ink); content: ""; }
.tab-panel { display: none; }.tab-panel.is-active { display: block; }
.template-list { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 17px; }
.paper-option { position: relative; display: grid; grid-template-columns: 39px 1fr; align-items: center; gap: 9px; min-height: 65px; padding: 8px; text-align: left; background: #f3f3f0; border: 1px solid transparent; border-radius: 8px; transition: 160ms ease; }
.paper-option:hover { background: #fff; border-color: #d6d6d1; }.paper-option.is-selected { background: #fff; border-color: var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.paper-thumb { position: relative; display: grid; width: 39px; height: 47px; place-items: center; overflow: hidden; border: 1px solid rgba(0,0,0,.1); font-size: 10px; font-weight: 700; }
.paper-thumb::before { position: absolute; top: 7px; right: 6px; left: 6px; height: 1px; background: currentColor; opacity: .2; content: ""; }
.paper-thumb::after { position: absolute; right: 7px; bottom: 8px; left: 7px; height: 6px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; opacity: .16; content: ""; }
.paper-thumb i { font-style: normal; }.cream-thumb { color: #3d3932; background: #fffdf7; }.blue-thumb { color: #29485b; background: #e2f0f5; }.midnight-thumb { color: #ecd89d; background: #17202b; }.dot-thumb { color: #663f35; background: #f4ddd2; }
.paper-option > span:nth-child(2) { display: grid; gap: 4px; min-width: 0; }.paper-option strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.paper-option small { display: none; color: var(--muted); font-size: 9px; }
.selected-icon { position: absolute; top: 6px; right: 6px; width: 13px; height: 13px; padding: 2px; color: #fff; background: var(--accent); border-radius: 50%; opacity: 0; }.paper-option.is-selected .selected-icon { opacity: 1; }
.custom-grid { display: grid; gap: 16px; margin-top: 22px; }
.color-field, .select-field, .range-field { display: grid; gap: 8px; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .02em; }
.color-field > span { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 11px 4px 5px; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.color-field input { width: 33px; height: 30px; padding: 0; border: 0; background: transparent; cursor: pointer; }.color-field b { color: var(--ink); font-size: 10px; letter-spacing: .03em; }
.select-field select { height: 40px; padding: 0 10px; background: #fff; border: 1px solid var(--line); border-radius: 6px; outline: 0; font-size: 11px; }
.range-field { grid-template-columns: 1fr auto; }.range-field input { grid-column: 1 / -1; width: 100%; accent-color: var(--accent); }.range-field b { color: var(--ink); }
.draft-note { display: flex; align-items: center; gap: 7px; margin-top: 19px; padding-top: 17px; color: #999993; border-top: 1px solid var(--line); font-size: 9px; }.draft-note svg { width: 13px; }
.save-paper-card { margin-top: 20px; padding: 17px; background: rgba(255,255,255,.72); border: 1px solid rgba(17,24,39,.07); border-radius: 18px; box-shadow: 0 10px 28px rgba(15,23,42,.055), inset 0 1px 0 rgba(255,255,255,.85); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.save-paper-copy { display: grid; gap: 3px; margin-bottom: 14px; }.save-paper-copy span { color: #8a8a90; font-size: 7px; font-weight: 800; letter-spacing: .18em; }.save-paper-copy strong { font-size: 12px; letter-spacing: -.025em; }.save-paper-copy small { color: var(--muted); font-size: 8px; line-height: 1.5; }
.save-paper-card > label { display: block; margin-bottom: 7px; color: var(--muted); font-size: 8px; font-weight: 700; }.save-paper-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; }.save-paper-form input { min-width: 0; height: 42px; padding: 0 12px; background: rgba(246,246,248,.9); border: 1px solid var(--line); border-radius: 12px; outline: 0; font-size: 10px; }.save-paper-form button { display: flex; height: 42px; align-items: center; gap: 6px; padding: 0 14px; color: #fff; background: #111; border: 0; border-radius: 999px; box-shadow: 0 7px 17px rgba(17,17,17,.18); font-size: 9px; font-weight: 750; transition: transform 160ms var(--ease), box-shadow 160ms ease; }.save-paper-form button:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(17,17,17,.25); }.save-paper-form button:active { transform: scale(.96); transition-duration: 70ms; }.save-paper-form svg { width: 13px; }
.saved-papers { margin-top: 23px; padding-top: 20px; border-top: 1px solid var(--line); }.saved-papers-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 10px; }.saved-papers-heading div { display: grid; gap: 3px; }.saved-papers-heading span { color: #8a8a90; font-size: 7px; font-weight: 800; letter-spacing: .18em; }.saved-papers-heading h2 { margin: 0; font-size: 13px; letter-spacing: -.03em; }.saved-papers-heading > b { display: grid; min-width: 22px; height: 22px; padding: 0 6px; place-items: center; color: #fff; background: #111; border-radius: 999px; font-size: 8px; }
.saved-paper-list { display: grid; gap: 8px; }.saved-paper-item { display: grid; grid-template-columns: minmax(0,1fr) 31px; gap: 6px; }.saved-paper-apply { position: relative; display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: center; gap: 10px; min-height: 64px; padding: 8px; text-align: left; background: rgba(255,255,255,.64); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 5px 16px rgba(15,23,42,.035); transition: transform 180ms var(--ease), box-shadow 180ms ease, border-color 180ms ease; }.saved-paper-apply:hover { transform: translateY(-2px); background: #fff; box-shadow: 0 10px 24px rgba(15,23,42,.08); }.saved-paper-apply.is-selected { border-color: rgba(17,24,39,.7); box-shadow: 0 10px 26px rgba(15,23,42,.1), inset 0 0 0 1px rgba(17,24,39,.65); }.saved-paper-apply strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.saved-paper-apply small { display: block; margin-top: 4px; color: var(--muted); font-size: 8px; }.custom-paper-thumb { display: grid; width: 42px; height: 48px; place-items: center; color: var(--thumb-ink); background: var(--thumb-paper); border: 1px solid rgba(0,0,0,.1); border-radius: 3px; box-shadow: inset 0 3px 0 var(--thumb-accent); font-size: 10px; font-weight: 750; }.delete-saved-paper { display: grid; width: 31px; min-height: 64px; padding: 0; place-items: center; color: #8e8e93; background: rgba(255,255,255,.56); border: 1px solid var(--line); border-radius: 13px; transition: transform 160ms var(--ease), color 160ms ease, background 160ms ease; }.delete-saved-paper:hover { color: #fff; background: #111; }.delete-saved-paper:active { transform: scale(.94); transition-duration: 70ms; }.delete-saved-paper svg { width: 13px; }

.workbench { min-width: 0; background: #e7e7e4; }
.workbench-bar { display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 25px; background: rgba(241,241,239,.9); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); }
.workbench-bar > div { display: flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 700; }.workbench-bar small { color: #9a9a94; font-size: 9px; font-weight: 500; }.status-dot { width: 6px; height: 6px; background: #5f996d; border-radius: 50%; box-shadow: 0 0 0 3px rgba(95,153,109,.12); }
.workbench-actions { gap: 5px !important; }.workbench-actions button { display: flex; align-items: center; gap: 6px; height: 31px; padding: 0 9px; color: var(--muted); background: #f8f8f6; border: 1px solid #d6d6d1; border-radius: 6px; font-size: 9px; }.workbench-actions button:hover { color: #fff; background: var(--dark); border-color: var(--dark); }.workbench-actions svg { width: 13px; height: 13px; }
.letter-stage { display: grid; min-height: calc(100vh - 124px); padding: clamp(28px, 4vw, 52px); place-items: start center; overflow: auto; }
.letter-paper { --letter-paper: #fffdf7; --letter-ink: #282620; --letter-accent: #ff4f2e; --letter-font: Pretendard, sans-serif; --letter-weight: 400; --letter-size: 18px; --letter-leading: 1.9; position: relative; display: flex; width: min(650px, 100%); min-height: 800px; flex-direction: column; padding: 42px clamp(32px, 7vw, 68px) 28px; color: var(--letter-ink); background: var(--letter-paper); border: 1px solid rgba(0,0,0,.14); box-shadow: 14px 14px 0 rgba(0,0,0,.06), var(--shadow); transition: color 250ms ease, background 250ms ease; }
.letter-paper::after { position: absolute; inset: 7px; pointer-events: none; border: 1px solid color-mix(in srgb, var(--letter-ink) 6%, transparent); content: ""; }
.paper-accent { display: flex; align-items: center; gap: 10px; color: var(--letter-accent); }.paper-accent span { width: 21px; height: 3px; background: currentColor; }.paper-accent b { font-size: 7px; font-weight: 800; letter-spacing: .19em; }
.letter-fields { display: flex; flex: 1; flex-direction: column; padding-top: 60px; font-family: var(--letter-font); font-weight: var(--letter-weight); }
.recipient-field, .sender-field { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; }.recipient-field span, .sender-field span { color: var(--letter-accent); font-weight: 800; white-space: nowrap; }
.letter-paper input, .letter-paper textarea { min-width: 0; padding: 0; color: inherit; background: transparent; border: 0; outline: 0; font-family: inherit; font-weight: inherit; }.letter-paper input::placeholder, .letter-paper textarea::placeholder { color: color-mix(in srgb, var(--letter-ink) 33%, transparent); }
.recipient-field input, .sender-field input { flex: 1; font-size: 14px; }
.title-field { width: 100%; margin-top: 41px; font-size: clamp(25px, 3vw, 35px) !important; font-weight: 750 !important; letter-spacing: -.045em; }
.body-field { width: 100%; min-height: 395px; flex: 1; margin-top: 27px; resize: none; font-size: var(--letter-size) !important; line-height: var(--letter-leading); letter-spacing: -.015em; }
.sender-field { justify-content: flex-end; margin: 28px 0 42px auto; }.sender-field input { max-width: 135px; text-align: right; }
.paper-footer { display: flex; justify-content: space-between; padding-top: 14px; color: color-mix(in srgb, var(--letter-ink) 46%, transparent); border-top: 1px solid color-mix(in srgb, var(--letter-ink) 15%, transparent); font-size: 7px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.theme-blue { --letter-paper: #e5f0f3; --letter-ink: #263e4b; --letter-accent: #397b98; }.theme-midnight { --letter-paper: #17202b; --letter-ink: #f2eee5; --letter-accent: #ffcd57; }.theme-dot { --letter-paper: #f5dfd4; --letter-ink: #4d352f; --letter-accent: #ff4f2e; }
.mobile-create-wrap { display: none; }

.modal { position: fixed; inset: 0; z-index: 50; display: grid; padding: 20px; place-items: center; visibility: hidden; opacity: 0; transition: 180ms ease; }.modal.is-open { visibility: visible; opacity: 1; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(17,17,17,.64); backdrop-filter: blur(7px); }
.modal-card { position: relative; width: min(490px, 100%); max-height: calc(100vh - 40px); padding: 36px; overflow-y: auto; background: #f8f8f6; border: 1px solid #111; border-radius: 10px; box-shadow: 10px 10px 0 rgba(255,79,46,.9); transform: translateY(13px); transition: 230ms var(--ease); }.modal.is-open .modal-card { transform: none; }
.modal-close { position: absolute; top: 16px; right: 16px; display: grid; width: 30px; height: 30px; padding: 0; place-items: center; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 50%; }.modal-close:hover { color: #fff; background: #111; }.modal-close svg { width: 14px; }
.link-card { text-align: center; }.success-icon { display: grid; width: 48px; height: 48px; margin: 0 auto 20px; place-items: center; color: #fff; background: var(--accent); border-radius: 9px; transform: rotate(-4deg); }.link-card .eyebrow { margin-bottom: 9px; }.link-card h2, .preview-card h2 { margin-bottom: 14px; font-size: 29px; font-weight: 760; line-height: 1.25; letter-spacing: -.055em; }.link-card > p:not(.eyebrow) { margin: 0 auto 22px; color: var(--muted); font-size: 11px; line-height: 1.65; }
.link-field { display: flex; height: 46px; padding: 4px; background: #ededeb; border: 1px solid var(--line); border-radius: 6px; }.link-field input { min-width: 0; flex: 1; padding: 0 9px; background: transparent; border: 0; outline: 0; color: #666660; font-size: 9px; }.link-field button { display: flex; align-items: center; gap: 6px; padding: 0 12px; color: #fff; background: var(--dark); border: 0; border-radius: 4px; font-size: 9px; font-weight: 700; }.link-field svg { width: 13px; }
.link-actions { display: grid; grid-template-columns: 1.08fr 1fr 1fr; gap: 7px; margin-top: 10px; }.link-actions button { display: flex; height: 41px; align-items: center; justify-content: center; gap: 6px; border-radius: 5px; font-size: 9px; font-weight: 700; }.primary-action { color: #fff; background: var(--accent); border: 0; }.secondary-action { background: transparent; border: 1px solid var(--line); }.link-actions svg { width: 13px; }.link-card > small { display: flex; justify-content: center; align-items: center; gap: 5px; margin-top: 17px; color: #999993; font-size: 8px; }.link-card > small svg { width: 11px; }
.preview-card { width: min(600px, 100%); }.preview-card > .eyebrow, .preview-card > h2 { text-align: center; }.mini-letter { margin-top: 23px; padding: 42px; color: var(--letter-ink, #282620); background: var(--letter-paper, #fffdf7); border: 1px solid rgba(0,0,0,.12); box-shadow: 8px 8px 0 rgba(0,0,0,.07); font-family: var(--letter-font, Pretendard, sans-serif); font-weight: var(--letter-weight, 400); }.mini-letter p:first-child { color: var(--letter-accent, var(--accent)); font-weight: 750; }.mini-letter h3 { margin-bottom: 21px; font-size: 24px; letter-spacing: -.04em; }.mini-letter #miniBody { max-height: 180px; overflow: hidden; white-space: pre-wrap; line-height: 1.8; }.mini-letter strong { display: block; margin-top: 26px; text-align: right; }
.toast { position: fixed; right: 20px; bottom: 20px; z-index: 80; padding: 11px 15px; color: #fff; background: var(--dark); border: 1px solid #333; border-radius: 6px; font-size: 10px; font-weight: 600; transform: translateY(18px); visibility: hidden; opacity: 0; transition: 200ms var(--ease); }.toast.show { visibility: visible; opacity: 1; transform: none; }

.reader { min-height: 100vh; background: #e7e7e4; }
.reader-header { display: flex; align-items: center; justify-content: space-between; height: 68px; padding: 0 clamp(20px, 5vw, 60px); background: rgba(248,248,246,.92); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }.reader-header > span { color: var(--muted); font-size: 9px; font-weight: 650; letter-spacing: .08em; }
.reader-intro { display: flex; min-height: calc(100vh - 68px); align-items: center; flex-direction: column; justify-content: center; padding: 42px 20px; text-align: center; animation: fadeIn 600ms ease both; }.envelope { position: relative; display: grid; width: 128px; height: 87px; margin-bottom: 33px; place-items: center; background: #fff; border: 1px solid #111; box-shadow: 8px 8px 0 rgba(0,0,0,.08); }.envelope::before, .envelope::after { position: absolute; inset: 0; clip-path: polygon(0 0, 50% 60%, 100% 0); background: #ededeb; content: ""; }.envelope::after { clip-path: polygon(0 100%, 50% 43%, 100% 100%); background: #fff; }.envelope svg { position: relative; z-index: 2; width: 24px; height: 24px; padding: 5px; color: #fff; background: var(--accent); border-radius: 6px; fill: var(--accent); transform: rotate(-5deg); }.reader-intro > p { margin-bottom: 12px; color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: .16em; }.reader-intro h1 { margin-bottom: 27px; font-size: clamp(34px, 6vw, 52px); font-weight: 770; line-height: 1.18; letter-spacing: -.065em; }.reader-intro button { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px; color: #fff; background: var(--dark); border: 0; border-radius: 6px; font-size: 11px; font-weight: 700; }.reader-intro button:hover { background: var(--accent); }.reader-intro > small { margin-top: 18px; color: #92928c; font-size: 8px; font-weight: 650; letter-spacing: .11em; }
.reader-letter-wrap { padding: 52px 20px 85px; animation: riseIn 600ms var(--ease) both; }.reader-paper { margin: 0 auto; min-height: 750px; }.reader-content { flex: 1; padding: 60px 0 48px; font-family: var(--letter-font); font-weight: var(--letter-weight); }.reader-to { color: var(--letter-accent); font-size: 14px; font-weight: 750; }.reader-content h2 { margin: 39px 0 27px; font-size: clamp(27px, 5vw, 37px); font-weight: 750; letter-spacing: -.05em; }.reader-body { white-space: pre-wrap; font-size: var(--letter-size); line-height: var(--letter-leading); letter-spacing: -.015em; }.reader-from { margin-top: 50px; text-align: right; color: var(--letter-accent); font-weight: 700; }.write-own { display: flex; width: fit-content; align-items: center; gap: 7px; margin: 28px auto 0; padding-bottom: 3px; color: var(--muted); border-bottom: 1px solid currentColor; font-size: 10px; font-weight: 650; }
@keyframes fadeIn { from { opacity: 0; } } @keyframes riseIn { from { opacity: 0; transform: translateY(20px); } }

@media (max-width: 900px) {
  .topbar { grid-template-columns: 1fr auto; padding: 0 20px; }.progress { display: none; }.studio { grid-template-columns: 310px minmax(0, 1fr); }.control-panel { padding: 34px 21px 22px; }.letter-stage { padding: 27px 20px; }.letter-paper { padding-right: 36px; padding-left: 36px; }
}
@media (max-width: 700px) {
  .topbar { position: sticky; top: 0; height: 62px; }.brand-tag, .header-action { display: none; }.studio { display: block; }.control-panel { padding: 28px 19px 18px; border-right: 0; border-bottom: 1px solid var(--line); }.panel-heading h1 { font-size: 27px; }.panel-heading > p:last-child { margin-bottom: 23px; }.paper-option small { display: none; }.draft-note { display: none; }.workbench-bar { height: 48px; padding: 0 16px; }.letter-stage { min-height: auto; padding: 20px 12px; }.letter-paper { min-height: 680px; padding: 29px 24px 22px; box-shadow: 7px 7px 0 rgba(0,0,0,.06); }.letter-fields { padding-top: 43px; }.title-field { margin-top: 32px; }.body-field { min-height: 345px; }.mobile-create-wrap { position: sticky; bottom: 0; z-index: 8; display: block; padding: 10px 13px calc(10px + env(safe-area-inset-bottom)); background: rgba(241,241,239,.94); border-top: 1px solid var(--line); backdrop-filter: blur(14px); }.mobile-create { display: flex; width: 100%; height: 46px; align-items: center; justify-content: center; gap: 8px; color: #fff; background: var(--dark); border: 0; border-radius: 6px; font-size: 11px; font-weight: 700; }.modal-card { padding: 32px 22px 24px; }.link-actions { grid-template-columns: 1fr; }.mini-letter { padding: 32px 22px; }.reader-paper { min-height: 680px; }
}
@media (max-width: 430px) { .template-list { grid-template-columns: 1fr 1fr; }.letter-paper { padding-right: 20px; padding-left: 20px; }.reader-header > span { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Tile × Apple refinement */
:root {
  --bg: #f5f5f7;
  --panel: rgba(255, 255, 255, .78);
  --ink: #111827;
  --muted: #6e6e73;
  --line: rgba(17, 24, 39, .08);
  --accent: #111111;
  --dark: #111111;
  --shadow: 0 20px 56px rgba(15, 23, 42, .1);
  --ease: cubic-bezier(.19, 1, .22, 1);
}

body {
  background: var(--bg);
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(17, 17, 17, .72);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(17, 17, 17, .1);
}

.topbar {
  background: rgba(250, 250, 252, .82);
  border-color: var(--line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .82);
  backdrop-filter: blur(26px) saturate(1.18);
  -webkit-backdrop-filter: blur(26px) saturate(1.18);
}

.brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .18);
}

.progress b {
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, .68);
  border-color: rgba(17, 24, 39, .12);
}

.progress .is-active b,
.selected-icon,
.success-icon,
.primary-action,
.envelope svg {
  background: #111111;
  border-color: #111111;
}

.header-action {
  min-height: 40px;
  padding-inline: 17px;
  border-radius: 999px;
  box-shadow: 0 7px 18px rgba(17, 17, 17, .2);
  transition: transform 180ms var(--ease), box-shadow 180ms ease, filter 180ms ease;
}

.header-action:hover {
  background: #111111;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 25px rgba(17, 17, 17, .28);
  filter: brightness(.96);
}

.header-action:active { transform: translateY(1px) scale(.98); }

.studio { grid-template-columns: 368px minmax(0, 1fr); }

.control-panel {
  padding: 40px 28px 24px;
  background: var(--panel);
  border-color: var(--line);
  box-shadow: 10px 0 34px rgba(15, 23, 42, .035);
  backdrop-filter: blur(24px) saturate(1.12);
  -webkit-backdrop-filter: blur(24px) saturate(1.12);
}

.eyebrow { color: var(--ink); }

.tabs {
  gap: 4px;
  padding: 4px;
  background: rgba(118, 118, 128, .1);
  border: 1px solid rgba(17, 24, 39, .04);
  border-radius: 13px;
}

.tab {
  min-height: 34px;
  padding: 0 10px;
  color: #86868b;
  border-radius: 9px;
  transition: background 180ms ease, box-shadow 180ms ease, color 180ms ease;
}

.tab.is-active {
  color: var(--ink);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 2px 8px rgba(15, 23, 42, .09);
}

.tab.is-active::after { display: none; }
.template-list { gap: 9px; }

.paper-option {
  min-height: 68px;
  padding: 9px;
  background: rgba(255, 255, 255, .64);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 5px 16px rgba(15, 23, 42, .035);
  transition: transform 180ms var(--ease), box-shadow 180ms ease, background 180ms ease, border-color 180ms ease;
}

.paper-option:hover {
  transform: translateY(-2px);
  background: #ffffff;
  border-color: rgba(17, 24, 39, .12);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
}

.paper-option.is-selected {
  background: #ffffff;
  border-color: rgba(17, 24, 39, .7);
  box-shadow: 0 10px 26px rgba(15, 23, 42, .1), inset 0 0 0 1px rgba(17, 24, 39, .65);
}

.selected-icon {
  top: 7px;
  right: 7px;
  width: 14px;
  height: 14px;
}

.color-field > span,
.select-field select {
  min-height: 42px;
  background: rgba(255, 255, 255, .86);
  border-color: var(--line);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65);
}

.workbench { background: #efeff2; }

.workbench-bar {
  background: rgba(250, 250, 252, .76);
  border-color: var(--line);
  backdrop-filter: blur(24px) saturate(1.12);
  -webkit-backdrop-filter: blur(24px) saturate(1.12);
}

.workbench-actions button {
  height: 32px;
  padding-inline: 10px;
  background: rgba(255, 255, 255, .72);
  border-color: var(--line);
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(15, 23, 42, .05);
  transition: transform 160ms var(--ease), box-shadow 160ms ease, background 160ms ease;
}

.workbench-actions button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(17, 17, 17, .16);
}

.letter-paper {
  --letter-accent: #111111;
  border-color: rgba(17, 24, 39, .08);
  border-radius: 6px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .12), 0 2px 8px rgba(15, 23, 42, .05);
}

.theme-blue { --letter-accent: #111111; }
.theme-midnight { --letter-accent: #ffffff; }
.theme-dot { --letter-accent: #111111; }

.modal-backdrop { background: rgba(17, 17, 17, .42); backdrop-filter: blur(12px); }

.modal-card {
  background: rgba(250, 250, 252, .94);
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 24px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .8);
  backdrop-filter: blur(28px) saturate(1.12);
  -webkit-backdrop-filter: blur(28px) saturate(1.12);
  transform: translateY(13px) scale(.98);
  transition: 300ms var(--ease);
}

.success-icon {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(17, 17, 17, .22);
  transform: none;
}

.link-actions button,
.reader-intro button,
.mobile-create {
  border-radius: 999px;
  transition: transform 180ms var(--ease), box-shadow 180ms ease;
}

.link-actions button:hover,
.reader-intro button:hover {
  transform: translateY(-2px) scale(1.02);
}

.primary-action,
.reader-intro button,
.mobile-create {
  background: #111111;
  box-shadow: 0 10px 24px rgba(17, 17, 17, .2);
}

.secondary-action { background: rgba(255, 255, 255, .72); }
.reader { background: #f5f5f7; }

.reader-header {
  background: rgba(250, 250, 252, .82);
  backdrop-filter: blur(26px) saturate(1.18);
  -webkit-backdrop-filter: blur(26px) saturate(1.18);
}

.envelope {
  border-color: rgba(17, 24, 39, .1);
  border-radius: 10px;
  box-shadow: 0 22px 50px rgba(15, 23, 42, .12);
}

.envelope svg { border-radius: 8px; fill: #111111; transform: none; }
.reader-intro > p { color: #111111; }

@media (max-width: 900px) {
  .studio { grid-template-columns: 310px minmax(0, 1fr); }
  .control-panel { padding: 34px 21px 22px; }
}

@media (max-width: 700px) {
  .studio { display: block; }
  .control-panel { padding: 28px 19px 18px; }
  .letter-paper { box-shadow: 0 18px 42px rgba(15, 23, 42, .11); }
  .mobile-create-wrap { background: rgba(245, 245, 247, .86); backdrop-filter: blur(22px); }
}

/* Bloom Garden & Sugar Pop stationery */
.flower-thumb {
  color: #a83f66;
  background:
    radial-gradient(circle at 18% 20%, #ffc5d9 0 8%, transparent 9%),
    radial-gradient(circle at 82% 26%, #f3aac4 0 7%, transparent 8%),
    radial-gradient(circle at 72% 78%, #ffd8a8 0 8%, transparent 9%),
    linear-gradient(145deg, #fffafc, #fff0f5);
}

.flower-thumb i {
  position: relative;
  z-index: 1;
  font-size: 17px;
  text-shadow: 0 2px 7px rgba(168, 63, 102, .2);
}

.cute-thumb {
  color: #7256b8;
  background:
    radial-gradient(circle at 18% 24%, #ffd5ed 0 7%, transparent 8%),
    radial-gradient(circle at 82% 22%, #d9d0ff 0 8%, transparent 9%),
    radial-gradient(circle at 76% 80%, #ffe4a8 0 7%, transparent 8%),
    linear-gradient(145deg, #fffaff, #f6f0ff);
}

.cute-thumb i {
  position: relative;
  z-index: 1;
  font-size: 18px;
  font-weight: 850;
  text-shadow: 0 2px 8px rgba(114, 86, 184, .18);
}

.theme-flower {
  --letter-accent: #b74870;
  background:
    radial-gradient(circle at 7% 7%, rgba(247, 160, 193, .32) 0 18px, transparent 19px),
    radial-gradient(circle at 11% 11%, rgba(255, 203, 224, .48) 0 10px, transparent 11px),
    radial-gradient(circle at 94% 88%, rgba(244, 177, 139, .28) 0 24px, transparent 25px),
    radial-gradient(circle at 89% 92%, rgba(247, 160, 193, .26) 0 13px, transparent 14px),
    linear-gradient(145deg, rgba(255,255,255,.42), rgba(255,240,247,.24)),
    var(--letter-paper);
}

.theme-flower .paper-accent span {
  width: 25px;
  height: 7px;
  background: radial-gradient(circle, currentColor 0 2px, transparent 2.5px) 0 50% / 8px 8px repeat-x;
}

.theme-cute {
  --letter-accent: #7256b8;
  background:
    radial-gradient(circle at 5% 9%, rgba(255, 190, 225, .34) 0 14px, transparent 15px),
    radial-gradient(circle at 9% 5%, rgba(202, 191, 255, .36) 0 9px, transparent 10px),
    radial-gradient(circle at 94% 91%, rgba(255, 220, 151, .32) 0 19px, transparent 20px),
    radial-gradient(circle at 88% 95%, rgba(255, 190, 225, .28) 0 11px, transparent 12px),
    linear-gradient(155deg, rgba(255,255,255,.52), rgba(244,238,255,.27)),
    var(--letter-paper);
}

.theme-cute .paper-accent span {
  width: 24px;
  height: 16px;
  background: none;
}

.theme-cute .paper-accent span::before {
  display: block;
  font-size: 15px;
  line-height: 1;
  content: "♡";
}

.paper-option:active {
  transform: translateY(0) scale(.965);
  box-shadow: 0 3px 10px rgba(15, 23, 42, .08);
  transition-duration: 70ms;
}

.tab:active,
.workbench-actions button:active,
.link-actions button:active,
.reader-intro button:active,
.mobile-create:active,
.modal-close:active,
.write-own:active,
.brand:active {
  transform: scale(.96);
  transition-duration: 70ms;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition-duration: .15s !important;
    transition-property: opacity !important;
  }
}

/* Receiver theme atmosphere */
.reader {
  --reader-bg: #f5f5f7;
  --reader-ink: #111827;
  --reader-muted: #6e6e73;
  position: relative;
  overflow: hidden;
  color: var(--reader-ink);
  background: var(--reader-bg);
}

.reader-theme-cream { --reader-bg: #f7f3e9; --reader-ink: #282620; --reader-muted: #7d7669; }
.reader-theme-blue { --reader-bg: #e9f3f6; --reader-ink: #263e4b; --reader-muted: #607985; }
.reader-theme-dot { --reader-bg: #f7e8e1; --reader-ink: #4d352f; --reader-muted: #8d6e64; }
.reader-theme-cute { --reader-bg: #f6efff; --reader-ink: #493b55; --reader-muted: #766886; }
.reader-theme-midnight { --reader-bg: #101720; --reader-ink: #f0e8d7; --reader-muted: #aaa9ad; }

.reader-theme-flower {
  --reader-bg: #fbddea;
  --reader-ink: #4b303c;
  --reader-muted: #916678;
  background:
    radial-gradient(circle at 8% 14%, rgba(255,255,255,.72) 0 7%, transparent 18%),
    radial-gradient(circle at 92% 86%, rgba(255,240,247,.9) 0 9%, transparent 22%),
    linear-gradient(145deg, #ffdce9 0%, #f8c9dc 46%, #ffeaf2 100%);
}

.reader > :not(.reader-petals) {
  position: relative;
  z-index: 1;
}

.reader-header {
  color: var(--reader-ink);
  background: color-mix(in srgb, var(--reader-bg) 76%, rgba(255,255,255,.55));
  border-bottom-color: color-mix(in srgb, var(--reader-ink) 9%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}

.reader-header > span,
.reader-intro > small,
.reader .write-own { color: var(--reader-muted); }
.reader-intro > p { color: var(--reader-ink); }

.reader-theme-midnight .reader-header {
  background: rgba(16, 23, 32, .76);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

.reader-theme-midnight .brand-mark { color: #111; background: #fff; }
.reader-theme-midnight .reader-intro button { color: #111; background: #fff; }

.reader-theme-flower .envelope {
  background: rgba(255, 250, 252, .92);
  border-color: rgba(116, 50, 77, .16);
  box-shadow: 0 24px 58px rgba(132, 58, 88, .2), inset 0 1px 0 rgba(255,255,255,.9);
}

.reader-theme-flower .envelope::before { background: #f7d2e1; }
.reader-theme-flower .envelope::after { background: #fff8fb; }
.reader-theme-flower .envelope svg { background: #b74870; fill: #b74870; }
.reader-theme-flower .reader-intro button { background: #3d252f; box-shadow: 0 12px 28px rgba(91, 40, 60, .24); }

.reader-petals {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: none;
  overflow: hidden;
  pointer-events: none;
}

.reader-theme-flower .reader-petals { display: block; }

.reader-petals span {
  --petal-left: 8vw;
  --petal-drift: 12vw;
  --petal-size: 20px;
  position: absolute;
  top: -14vh;
  left: var(--petal-left);
  color: rgba(183, 72, 112, .5);
  font-size: var(--petal-size);
  line-height: 1;
  filter: drop-shadow(0 5px 8px rgba(126, 48, 79, .12));
  animation: petal-float 11s linear infinite;
  animation-delay: var(--petal-delay, 0s);
}

.reader-petals span:nth-child(1) { --petal-left: 4vw; --petal-drift: 17vw; --petal-size: 18px; --petal-delay: -2s; animation-duration: 12s; }
.reader-petals span:nth-child(2) { --petal-left: 14vw; --petal-drift: -8vw; --petal-size: 25px; --petal-delay: -8s; animation-duration: 15s; }
.reader-petals span:nth-child(3) { --petal-left: 27vw; --petal-drift: 13vw; --petal-size: 15px; --petal-delay: -5s; animation-duration: 10s; }
.reader-petals span:nth-child(4) { --petal-left: 39vw; --petal-drift: -14vw; --petal-size: 22px; --petal-delay: -11s; animation-duration: 16s; }
.reader-petals span:nth-child(5) { --petal-left: 51vw; --petal-drift: 10vw; --petal-size: 17px; --petal-delay: -7s; animation-duration: 13s; }
.reader-petals span:nth-child(6) { --petal-left: 62vw; --petal-drift: -11vw; --petal-size: 27px; --petal-delay: -3s; animation-duration: 17s; }
.reader-petals span:nth-child(7) { --petal-left: 73vw; --petal-drift: 14vw; --petal-size: 16px; --petal-delay: -13s; animation-duration: 14s; }
.reader-petals span:nth-child(8) { --petal-left: 84vw; --petal-drift: -13vw; --petal-size: 21px; --petal-delay: -6s; animation-duration: 12s; }
.reader-petals span:nth-child(9) { --petal-left: 94vw; --petal-drift: -18vw; --petal-size: 24px; --petal-delay: -10s; animation-duration: 16s; }
.reader-petals span:nth-child(10) { --petal-left: 20vw; --petal-drift: 8vw; --petal-size: 13px; --petal-delay: -15s; animation-duration: 18s; }
.reader-petals span:nth-child(11) { --petal-left: 57vw; --petal-drift: -7vw; --petal-size: 14px; --petal-delay: -1s; animation-duration: 11s; }
.reader-petals span:nth-child(12) { --petal-left: 89vw; --petal-drift: -16vw; --petal-size: 18px; --petal-delay: -12s; animation-duration: 15s; }

@keyframes petal-float {
  0% { transform: translate3d(0, -12vh, 0) rotate(0deg) scale(.82); opacity: 0; }
  9% { opacity: .82; }
  48% { transform: translate3d(calc(var(--petal-drift) * .45), 50vh, 0) rotate(185deg) scale(1); }
  90% { opacity: .72; }
  100% { transform: translate3d(var(--petal-drift), 122vh, 0) rotate(410deg) scale(.88); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .reader-petals { display: none !important; }
}