/* 나눔 페이지 — site.css 토큰을 그대로 쓴다 */
.share-head { max-width:640px; }
.share-page { padding-bottom:72px; }
.share-head .lead { max-width:560px; }
.br-m { display:none; }

.share-box { max-width:640px; margin:0 0 72px; padding:36px 36px 32px; border-radius:28px;
  background:var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.share-box { scroll-margin-top:calc(var(--head-h) + 16px); }
.share-form { display:grid; gap:26px; }

.field label { display:flex; align-items:center; gap:8px; margin:0 0 8px; font-size:16px; font-weight:700; word-break:keep-all; }
.field label em { font-style:normal; font-size:12px; font-weight:600; color:var(--gold); }
.field label em.opt { color:var(--faint); }
.field .hint { margin:-2px 0 10px; font-size:14px; line-height:1.6; color:var(--sub); word-break:keep-all; }
.field input + .hint { margin:8px 0 0; }
.field input, .field textarea { width:100%; display:block; border:0; border-radius:14px; padding:13px 15px;
  background:var(--paper); color:var(--text); box-shadow: inset 0 0 0 1px var(--line);
  font:inherit; font-size:16px; line-height:1.7; -webkit-appearance:none; appearance:none; }
.field textarea { resize:vertical; min-height:120px; }
.field input::placeholder, .field textarea::placeholder { color:var(--faint); }
.field input:focus, .field textarea:focus { outline:none; box-shadow: inset 0 0 0 1.5px var(--gold); }
.field [aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px #C0533A; }
.count { margin:6px 2px 0; text-align:right; font-size:12.5px; color:var(--faint); font-variant-numeric:tabular-nums; }

.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.check { display:flex; align-items:center; gap:12px; cursor:pointer; font-size:15.5px; font-weight:500; word-break:keep-all; position:relative; }
.check input { position:absolute; opacity:0; width:22px; height:22px; margin:0; cursor:pointer; }
.check .box { flex:none; width:22px; height:22px; border-radius:7px; box-shadow: inset 0 0 0 1.5px var(--faint); background:var(--paper);
  display:flex; align-items:center; justify-content:center; transition: background .15s ease, box-shadow .15s ease; }
.check input:checked + .box { background:var(--btn); box-shadow:none; }
.check input:checked + .box::after { content:""; width:6px; height:11px; border-right:2px solid var(--btnText); border-bottom:2px solid var(--btnText);
  transform: translateY(-1px) rotate(45deg); }
.check input:focus-visible + .box { outline:2px solid var(--gold); outline-offset:3px; }

.privacy { margin:-6px 0 0; padding:14px 16px; border-radius:14px; background:var(--paper); font-size:13.5px; line-height:1.7; color:var(--sub); word-break:keep-all; }
.err { margin:-8px 0 0; font-size:14.5px; line-height:1.6; color:#C0533A; word-break:keep-all; }
.err a { color:inherit; }

button.send, button.again { justify-self:center; width:80%; height:52px; border:0; border-radius:26px; cursor:pointer;
  background:var(--btn); color:var(--btnText); font:inherit; font-size:16.5px; font-weight:600; }
button.send[disabled] { opacity:.55; cursor:default; }
button.again { width:auto; padding:0 28px; height:46px; font-size:15px; background:var(--paper); color:var(--text); box-shadow: inset 0 0 0 1px var(--line); }

.share-done { text-align:center; padding:28px 0 12px; outline:none; }
.share-done .ic { width:56px; height:56px; border-radius:28px; margin:0 auto 18px; display:flex; align-items:center; justify-content:center; background:var(--paper); }
.share-done .ic svg { width:26px; height:26px; fill:none; stroke:var(--gold); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.share-done h2 { margin:0 0 8px; font-size:22px; font-weight:700; letter-spacing:-0.3px; }
.share-done p { margin:0 0 26px; font-size:15.5px; color:var(--sub); }

@media (max-width: 760px) {
  .br-m { display:inline; }
  .share-box { padding:26px 20px 24px; border-radius:22px; margin:0 0 56px; }
  button.send { width:100%; }
}

/* 실어도 될까요? (보낼 때 동의 안 켰으면) */
.ask { position:fixed; inset:0; z-index:50; display:flex; align-items:flex-end; justify-content:center;
  padding:16px max(16px, env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(16px, env(safe-area-inset-left,0px));
  background:color-mix(in srgb, #000 40%, transparent); }
.ask-card { width:100%; max-width:440px; padding:26px 22px 20px; border-radius:24px; background:var(--card); outline:none;
  box-shadow: 0 20px 60px -20px rgba(0,0,0,.45); text-align:center; }
.ask-card h2 { margin:0 0 8px; font-size:19px; font-weight:700; letter-spacing:-0.2px; }
.ask-card p { margin:0 0 20px; font-size:15px; line-height:1.7; color:var(--sub); word-break:keep-all; }
.ask-btns { display:grid; gap:8px; justify-items:center; }
.ask-btns button { width:100%; }
.ask-btns button.again { height:48px; }
@media (min-width: 761px) { .ask { align-items:center; } }

[hidden] { display:none !important; }