.sns-page {
	box-sizing: border-box;
	min-height: 100vh;
	margin: 0;
	background: #f5f7fa;
	color: #18212f;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.sns-page *, .sns-page *::before, .sns-page *::after { box-sizing: inherit; }

.sns-shell {
	width: min(760px, calc(100% - 28px));
	margin: 40px auto;
}

.sns-card {
	background: #fff;
	border: 1px solid #dfe5ec;
	border-radius: 16px;
	padding: 28px;
	box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

.sns-card h1 { margin: 0 0 20px; font-size: 28px; }
.sns-card h2 { margin-top: 28px; font-size: 20px; }

.sns-form, .sns-share-form { display: grid; gap: 10px; }
.sns-form { gap: 14px; }

.sns-form label, .sns-share-form label { font-weight: 600; }

.sns-form input[type="text"],
.sns-form input[type="password"],
.sns-form input[type="email"],
.sns-form input[type="tel"],
.sns-form input[type="datetime-local"],
.sns-form textarea,
.sns-share-form input {
	width: 100%;
	border: 1px solid #c9d2dd;
	border-radius: 9px;
	padding: 12px;
	font: inherit;
	background: #fff;
}

.sns-form textarea { min-height: 280px; resize: vertical; }

.sns-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 4px;
}

.sns-tabs label {
	cursor: pointer;
	padding: 9px 12px;
	border: 1px solid #ccd5df;
	border-radius: 8px;
	font-weight: 500;
}

.sns-button {
	border: 0;
	border-radius: 9px;
	padding: 12px 18px;
	background: #1d4ed8;
	color: #fff;
	font-weight: 700;
	cursor: pointer;
	min-height: 44px;
}

.sns-button:hover { opacity: .92; }
.sns-secondary { white-space: nowrap; }

.sns-alert {
	padding: 12px 14px;
	border-radius: 8px;
	margin-bottom: 16px;
	background: #eef3f8;
}

.sns-error { background: #fff0f0; }
.sns-success-icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: #e8f7ed;
	font-size: 25px;
	margin-bottom: 12px;
}

.sns-link-row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 8px;
	align-items: center;
}

.sns-link-row input {
	width: 100%;
	padding: 12px;
	border: 1px solid #c9d2dd;
	border-radius: 9px;
	font: inherit;
}

.sns-share { border-top: 1px solid #e5e9ee; margin-top: 28px; padding-top: 6px; display: grid; gap: 20px; }
.sns-share-form { padding: 16px; border: 1px solid #e2e7ed; border-radius: 12px; }
.sns-note-content { overflow-wrap: anywhere; }
.sns-content-code { white-space: pre-wrap; word-break: break-word; margin: 0; font: 0.95rem/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; }
.sns-expiry { color: #687586; font-size: 13px; margin-top: 24px; }
.sns-note-meta { font-size: 12px; text-transform: uppercase; color: #687586; margin-bottom: 14px; }
.sns-hidden, .sns-hp { display: none !important; }

@media (max-width: 600px) {
	.sns-shell { margin: 14px auto; width: min(100% - 18px, 760px); }
	.sns-card { padding: 18px; border-radius: 12px; }
	.sns-link-row { grid-template-columns: 1fr; }
	.sns-button { width: 100%; }
}