/* 메시지 카드 · 응원 남기기 (메인 · 아트월 공용) */
[hidden]{display:none!important}

/* 카드: layout.json 좌표 그대로 (메시지 x7% y15% w86% h60%, 서명 x7% y87%) */
.mcard{position:relative;width:100%;aspect-ratio:1;container-type:inline-size;--ink:#16325C}
.mcard>img{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none;pointer-events:none}
.mc-m{position:absolute;left:7%;top:15%;width:86%;height:60%;display:flex;align-items:center;justify-content:center}
.mc-t{width:100%;max-height:100%;overflow:hidden;text-align:center;color:var(--ink);font:700 22px/1.5 'Gowun Batang',serif;font:700 7cqw/1.5 'Gowun Batang',serif;letter-spacing:-.01em;word-break:keep-all;overflow-wrap:anywhere;white-space:pre-wrap;outline:none}
.mc-t.l2{font-size:6cqw}.mc-t.l3{font-size:5.2cqw}.mc-t.l4{font-size:4.6cqw}
.mc-t[contenteditable]{cursor:text;min-height:1.5em;border-radius:2cqw;transition:background .2s}
.mc-t[contenteditable]:focus{background:rgba(31,95,208,.05)}
.mc-t:empty::before{content:attr(data-ph);opacity:.32;pointer-events:none}
.mc-s{position:absolute;left:7%;top:87%;max-width:68%;font:700 12px/1.2 'Pretendard Variable',Pretendard,sans-serif;font:700 3.6cqw/1.2 'Pretendard Variable',Pretendard,sans-serif;color:var(--ink);opacity:.78;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 응원 남기기 창 */
.jx{border:0;padding:0;background:transparent;color:#fff;max-width:none;max-height:none;margin:auto}
.jx::backdrop{background:rgba(10,24,70,.5);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.jx[open]{animation:jxpop .35s cubic-bezier(.2,.9,.3,1.2)}
@keyframes jxpop{from{opacity:0;transform:translateY(16px) scale(.98)}}
.jx-sheet{position:relative;width:min(560px,calc(100vw - 20px));max-height:min(94svh,900px);overflow:auto;background:linear-gradient(180deg,rgba(24,56,140,.98),rgba(14,34,92,.99));border:1px solid rgba(255,255,255,.2);border-radius:28px;padding:26px 26px 22px;box-shadow:0 30px 90px rgba(10,24,70,.55);font-family:'Pretendard Variable',Pretendard,sans-serif;word-break:keep-all}
.jx-x{position:absolute;right:16px;top:16px;width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:#fff;font-size:16px;cursor:pointer}
.jx-prog{display:flex;gap:6px;margin:0 46px 18px 0}
.jx-prog i{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.14);transition:background .3s}
.jx-prog i.on{background:linear-gradient(90deg,#62C3FF,#FFD39A)}
.jx-step{font-size:12px;font-weight:800;letter-spacing:.14em;color:#FFD39A;margin-bottom:6px}
.jx h3{font:800 23px/1.3 'Paperlogy','Pretendard Variable',sans-serif;letter-spacing:-.03em;margin:0 0 6px}
.jx-sub{color:rgba(255,255,255,.75);font-size:14px;margin:0 0 16px;line-height:1.55}
.jx-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.jx-pick{position:relative;border:2px solid transparent;border-radius:18px;padding:6px;background:rgba(255,255,255,.06);cursor:pointer;color:#fff;text-align:left;transition:border-color .2s,transform .15s,background .2s;font:inherit}
.jx-pick:hover{transform:translateY(-2px);background:rgba(255,255,255,.1)}
.jx-pick img{width:100%;aspect-ratio:1;display:block;border-radius:12px}
.jx-pick span{display:block;font-size:13px;font-weight:700;padding:8px 4px 2px}
.jx-pick.on{border-color:#FFD39A;background:rgba(255,211,154,.12)}
.jx-pick.on::after{content:"✓";position:absolute;right:12px;top:12px;width:26px;height:26px;border-radius:50%;background:#FFD39A;color:#14306E;font-weight:900;display:grid;place-items:center;font-size:14px}
.jx-preview{width:min(100%,460px);margin:0 auto;filter:drop-shadow(0 18px 40px rgba(0,0,0,.35))}
.jx-meta{display:flex;justify-content:space-between;align-items:center;margin:10px 2px 0;font-size:12px;color:rgba(255,255,255,.6)}
.jx-meta b{font-variant-numeric:tabular-nums;color:#fff}
.jx-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.jx-chips button{border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:rgba(255,255,255,.85);border-radius:999px;padding:7px 12px;font:600 13px/1.2 'Pretendard Variable',Pretendard,sans-serif;cursor:pointer}
.jx-chips button:hover{border-color:#FFD39A;color:#fff}
.jx-label{font-size:13px;font-weight:700;color:rgba(255,255,255,.8);margin:4px 0 8px}
.jx-field{display:flex;flex-direction:column;gap:6px;margin-top:16px}
.jx-field span{font-size:13px;font-weight:700;color:rgba(255,255,255,.8)}
.jx-field input{width:100%;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.2);border-radius:14px;padding:13px 14px;font:500 16px 'Pretendard Variable',Pretendard,sans-serif;color:#fff;outline:none;box-sizing:border-box}
.jx-field input:focus{border-color:#7FB8FF}
.jx-help{font-size:12px;color:rgba(255,255,255,.55);margin:6px 2px 0;line-height:1.5}
.jx-cons{border-top:1px solid rgba(255,255,255,.14);margin-top:16px;padding-top:4px}
.jx-check{display:flex;gap:10px;align-items:flex-start;margin-top:10px;font-size:13px;color:rgba(255,255,255,.78);cursor:pointer;line-height:1.5}
.jx-check input{width:19px;height:19px;margin-top:1px;accent-color:#3D8BFF;flex:none}
.jx-check b{color:#fff}
.jx-mini{display:flex;gap:14px;align-items:center;background:rgba(255,255,255,.06);border-radius:16px;padding:10px;margin-bottom:16px}
.jx-mini .mcard{width:92px;flex:none}
.jx-mini p{margin:0;font-size:13px;color:rgba(255,255,255,.75);line-height:1.5}
.jx-row{display:flex;gap:8px;margin-top:18px}
.jx-btn{flex:1;border:0;border-radius:999px;padding:15px;font:800 15px 'Pretendard Variable',Pretendard,sans-serif;cursor:pointer;transition:transform .15s,opacity .2s}
.jx-btn:active{transform:scale(.98)}
.jx-btn:disabled{opacity:.4;cursor:not-allowed}
.jx-ghost{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.2)}
.jx-main{background:linear-gradient(100deg,#FFD39A,#FFB866);color:#14306E;box-shadow:0 10px 30px rgba(255,184,102,.35)}
.jx-warn{margin:8px 2px 0;font-size:12.5px;color:#FFC2C2}
.jx-help.bad{color:#FFC2C2}
.jx-field input.bad{border-color:#FF8A8A}
.jx-nicks{margin-top:8px}
.jx-nicks button{padding:5px 11px;font-size:12.5px}
.jx-prize{margin-top:16px;border-radius:16px;padding:12px 14px 14px;background:rgba(255,211,154,.08);border:1px solid rgba(255,211,154,.3)}
.jx-prize-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.jx-prize-h b{font-size:14px;color:#FFD39A}
.jx-prize-h span{font-size:12px;color:rgba(255,255,255,.7)}
.jx-prize .jx-field{margin-top:12px}
.jx-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.jx-link{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px 0 5px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);color:#fff;font-family:inherit;font-size:12px;font-weight:700;text-decoration:none;transition:border-color .15s,background .15s}
.jx-link:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.13)}
.jx-link i{flex:none;width:20px;height:20px;border-radius:6px;display:grid;place-items:center;font-style:normal;font-weight:900;font-size:12px;color:#fff}
.jx-link i svg{display:block}
.jx-link span{opacity:.6;font-size:11px}
.li-ig{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%)}
.li-fb{background:#1877F2;font-family:Arial,sans-serif}
.li-yt{background:#FF0000}
.jx-gift{margin:8px 2px 0;font-size:13px;font-weight:800;color:#FFD39A;line-height:1.5}
.jx-field em{font-style:normal;font-size:11px;font-weight:800;color:#14306E;background:#FFD39A;border-radius:999px;padding:1px 7px;margin-left:4px}
.jx-check.need span{color:#FFD39A}
.jx-check.need input{outline:2px solid #FFD39A;outline-offset:2px;border-radius:4px}
.jx-err{margin:12px 0 0;padding:10px 12px;border-radius:12px;background:rgba(255,99,99,.14);border:1px solid rgba(255,140,140,.45);color:#FFD6D6;font-size:13px;line-height:1.5}
.jx-small{font-size:12px;color:rgba(255,255,255,.5);margin-top:12px;line-height:1.6}

/* 보내는 중 연출 */
.jx-fly{position:fixed;z-index:200;pointer-events:none;transition:transform 1.1s cubic-bezier(.6,-0.2,.3,1),opacity 1.1s ease}
.jx-veil{position:fixed;inset:0;z-index:199;display:grid;place-items:center;background:radial-gradient(60% 60% at 50% 40%,rgba(255,255,255,.95),rgba(217,238,255,.98));opacity:0;transition:opacity .6s;pointer-events:none;font:800 clamp(20px,3vw,34px)/1.4 'Paperlogy','Pretendard Variable',sans-serif;color:#14306E;text-align:center}
.jx-veil.on{opacity:1}
.jx-veil small{display:block;font:600 14px 'Pretendard Variable',Pretendard,sans-serif;color:#4A6FA8;margin-top:8px}

@media (max-width:560px){
  .jx-sheet{padding:22px 16px 18px;border-radius:24px}
  .jx h3{font-size:21px}
}