/* Stitch 13950939945910145098: LINE desktop/mobile, 2026-09-30. */
body[data-page="line-join"][data-wedding-ui] { background: #fcf9f6; color: #504445; min-height: 100vh; }
body[data-page="line-join"] .join-container { box-sizing: border-box; width: 100%; max-width: 720px; margin: 0 auto; padding: 32px 16px; text-align: center; }
body[data-page="line-join"] .join-header { margin: 0 0 32px; padding: 0; background: none; }
.join-badge { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; background: #f0edea; box-shadow: 0 1px 2px #4a252b0d; }
.join-badge img { width: 40px; height: 40px; }
body[data-page="line-join"] .join-eyebrow { margin: 0 0 8px; color: #837375; font: 500 13px/18px "Home Serif TC", serif; letter-spacing: .2em; }
body[data-page="line-join"] .join-header h1 { margin: 0 0 12px; color: #4a252b; font: 600 32px/40px "Home Serif TC", serif; letter-spacing: .02em; }
body[data-page="line-join"] .join-caption { max-width: 460px; margin: 0 auto; font-size: 14px; line-height: 22px; color: #504445; }
body[data-page="line-join"] #main :is(.qr-card,.steps-card) { box-sizing: border-box; max-width: 576px; margin: 0 auto 32px; border: 1px solid #ede4dc; border-radius: 32px; background: #fff; box-shadow: 0 1px 2px #4a252b0d; }
body[data-page="line-join"] .qr-card { padding: 40px; }
body[data-page="line-join"] .qr-card h2 { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 24px; padding: 0; border: 0; font-size: 14px; font-weight: 500; color: #4a252b; }
.qr-card h2::before,.qr-card h2::after { content: ''; width: 32px; height: 1px; background: #e5e2df; }
.qr-wrapper { box-sizing: border-box; width: 208px; height: 208px; padding: 12px; display: grid; place-items: center; margin: 0 auto 24px; border: 1px solid #ede4dc; border-radius: 16px; background: white; }
.qr-wrapper img { display: block; width: 100%; height: 100%; object-fit: contain; }
.qr-placeholder { display: flex; flex-direction: column; justify-content: center; gap: 12px; font-size: 12px; }
.line-id-pill { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; gap: 8px; padding: 2px 8px 2px 16px; border: 1px solid #e8dcd4; border-radius: 999px; background: #f7f2ee; font-size: 14px; overflow-wrap: anywhere; }
#line-id { user-select: all; }
#copy-line-id { display: grid; flex: none; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #4a252b; cursor: pointer; }
#copy-feedback { min-height: 18px; margin: 6px 0 16px; color: #087d3d; font-size: 11px; line-height: 18px; }
.join-action { max-width: 576px; margin: 0 auto; }
body[data-page="line-join"] :is(.btn-add-friend,.btn-add-friend-disabled) { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 4px 16px; box-sizing: border-box; border-radius: 999px; background: #06c755; color: #fff; font: 500 13px/20px var(--font-sans-tc, sans-serif); text-decoration: none; }
.btn-add-friend img { width: 40px; height: 40px; flex: none; }
body[data-page="line-join"] .btn-add-friend-disabled { background: #eee8e2; color: #6b5c5e; }
body[data-page="line-join"] .steps-card { padding: 32px; text-align: left; }
body[data-page="line-join"] .steps-card h2 { color: #4a252b; margin: 0 0 20px; padding: 0 0 12px; border-bottom: 1px solid #f3ece6; font-size: 16px; }
.step-list { display: grid; gap: 20px; list-style: none; margin: 0; padding: 0; }
.step-item { display: flex; align-items: flex-start; gap: 12px; }
.step-num { display: grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #f4ece6; color: #4a252b; font-size: 12px; }
.step-text { font-size: 12px; line-height: 20px; color: #504445; }
.step-text strong { font-size: 14px; font-weight: 500; color: #1b1c1a; }
body[data-page="line-join"] .help-note { margin: 0; padding: 8px 0; font-size: 12px; color: #7c6d6f; }
.join-footer { padding: 32px 16px; background: #f6f3f0; text-align: center; font-size: 13px; letter-spacing: .15em; color: #7c6d6f; }
body[data-page="line-join"] .mobile-only { display: none; }
body[data-page="line-join"] :is(a,button):focus-visible { outline: 2px solid #4a252b; outline-offset: 3px; }
@media (max-width: 767px) {
  body[data-page="line-join"] .desktop-only { display: none; }
  body[data-page="line-join"] .mobile-only { display: block; }
  body[data-page="line-join"] .join-container { padding: 24px 16px; }
  body[data-page="line-join"] .join-header { margin-bottom: 24px; }
  .join-badge { width: 56px; height: 56px; margin-bottom: 12px; border: 1px solid #e8dcd4; background: #f4ece6; }
  body[data-page="line-join"] .join-eyebrow { font-size: 11px; letter-spacing: .25em; margin-bottom: 6px; color: #8c6b70; }
  body[data-page="line-join"] .join-header h1 { font-size: 24px; line-height: 32px; font-weight: 500; margin-bottom: 8px; }
  body[data-page="line-join"] .join-caption { font-size: 12px; line-height: 20px; padding: 0 16px; color: #7c6d6f; }
  .join-action { margin-bottom: 24px; }
  body[data-page="line-join"] #main :is(.qr-card,.steps-card) { padding: 24px; border-radius: 16px; margin-bottom: 24px; }
  body[data-page="line-join"] .qr-card h2 { display: inline-flex; padding: 4px 12px; border-radius: 999px; background: #fbf6f3; font-size: 12px; margin-bottom: 16px; }
  .qr-card h2::before,.qr-card h2::after { content: none; }
  .qr-wrapper { width: 192px; height: 192px; margin-bottom: 16px; }
  .line-id-pill { font-size: 12px; }
  #copy-feedback { margin-bottom: 0; }
  body[data-page="line-join"] .steps-card h2 { font-size: 14px; margin-bottom: 16px; }
  .step-list { gap: 16px; }
  .step-num { width: 24px; height: 24px; }
  .step-text { font-size: 11px; line-height: 18px; }
  .step-text strong { font-size: 12px; }
  body[data-page="line-join"] .help-note { font-size: 11px; }
  .join-footer { display: none; }
}