.nox-share-dialog { color-scheme: dark; width: min(480px,calc(100% - 28px)); max-width: none; max-height: min(860px,calc(100dvh - 32px)); padding: 0; border: 1px solid #38383e; border-radius: 24px; background: #17171c; color: #f9f9fc; font-family: var(--nox-font-sans,sans-serif); box-shadow: 0 24px 96px #0009; overscroll-behavior: contain; }
.nox-share-dialog::backdrop { background: #000b; backdrop-filter: blur(6px); }
.nox-share-panel { padding: 24px; }
.nox-share-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.nox-share-header h2 { margin: 0; color: #fff; font-size: 21px; line-height: 1.4; font-weight: 750; letter-spacing: -.04em; }
.nox-share-preview { overflow: hidden; border-radius: 16px; background: #101014; border: 1px solid #ffffff12; }
.nox-share-preview > img { display: block; width: 100%; height: auto; max-height: 230px; object-fit: contain; background: #080809; }
.nox-share-preview > div { padding: 16px; }
.nox-share-brand { color: #ee7589; font-size: 12px; }
.nox-share-preview h3 { color: #fff; margin: 6px 0 8px; font-size: 18px; font-weight: 750; line-height: 1.4; letter-spacing: -.025em; }
.nox-share-preview p { margin: 0; color: #b5b5c0; font-size: 14px; line-height: 1.65; }
.nox-share-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 20px; }
.nox-share-action { appearance: none; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; min-width: 0; min-height: 78px; padding: 12px 5px; border: 1px solid #ffffff15; border-radius: 12px; background: #232329; color: #ebebf2; font: 600 13px/1.3 var(--nox-font-sans,sans-serif); text-decoration: none; cursor: pointer; }
.nox-share-action > i { font-size: 22px; }
.nox-share-action > img { width: 24px; height: 24px; object-fit: contain; }
.nox-share-action.is-primary { background: #d92142; border-color: #ef506b; color: #fff; }
.nox-share-action.is-kakao { background: #fee500; border-color: #fee500; color: #191919; }
.nox-share-action:disabled { opacity: .55; cursor: wait; }
.nox-share-action:focus-visible, .nox-share-address input:focus-visible { outline: 2px solid #ff8298; outline-offset: 3px; }
.nox-share-close { min-height: 40px; width: 40px; padding: 0; flex: 0 0 40px; border: 0; background: #ffffff08; }
.nox-share-close span { position: absolute; width: 1px; height: 1px; padding: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.nox-share-address { display: grid; gap: 8px; margin-top: 20px; color: #adadba; font-size: 12px; }
.nox-share-address input { box-sizing: border-box; width: 100%; min-width: 0; height: 44px; border: 1px solid #35353e; border-radius: 9px; background: #101014; color: #dddde5; padding: 0 12px; font: 13px/1.5 var(--nox-font-sans,sans-serif); }
.nox-share-status { min-height: 20px; margin: 10px 0; color: #f6adba; font-size: 13px; line-height: 1.6; }
.nox-share-privacy { margin: 0; padding-top: 14px; border-top: 1px solid #ffffff0c; color: #90909e; font-size: 12px; line-height: 1.6; }
.story-title-share { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border: 1px solid #ffffff16; border-radius: 10px; color: #dedee7; background: #ffffff06; cursor: pointer; font-size: 19px; }
@media (hover:hover) { .nox-share-action:hover { filter: brightness(1.16); } .story-title-share:hover { color: #fff; background: #ffffff12; } }
@media (max-width:520px) { .nox-share-dialog { width: 100%; max-height: calc(100dvh - 16px); margin: auto 0 0; border-radius: 24px 24px 0 0; } .nox-share-panel { padding: 20px 20px calc(20px + env(safe-area-inset-bottom,0px)); } .nox-share-preview > img { max-height: 190px; } }