/* 선택형 레이아웃 공통 화면 모드와 모바일 가독성 규칙 */

html[data-theme="light"] {
	color-scheme: light;
	--chat-message-accent: #4b5d88;
	--chat-message-accent-hover: #405177;
	--chat-message-accent-soft: #e8ecf4;
	--chat-message-accent-muted: #8b96aa;
	--theme-nav-active: #294391;
	--theme-nav-icon-active: var(--theme-nav-active);
	--theme-nav-inactive: #818aa0;
	--theme-nav-background: rgba(255, 255, 255, .97);
	--theme-nav-line: #d7deec;
	--theme-nav-line-height: 3px;
	--theme-nav-glow: rgba(41, 67, 145, .24);
	--theme-nav-indicator-width: 28px;
	--theme-nav-indicator-height: 4px;
	--theme-nav-brightness: 1;
	--theme-nav-brightness-peak: 1;
	--theme-nav-brightness-soft: 1;
}

html[data-theme="light"] body {
	background: #f6f7fa;
}

html[data-theme="light"] :is(.site, .layout, .main, .site-header, .side-nav) {
	background: transparent;
}

html[data-theme="light"] .site-header {
	border-bottom-color: #dfe3ee;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

:is(.list, .message-list, .account-activity-list, .account-session-list) > li:not(:first-of-type) {
	border-top: 1px solid var(--line);
}

html[data-theme="dark"] {
	color-scheme: dark;
	--navy-950: #0b1429;
	--navy-900: #9fb4ff;
	--navy-800: #bac8ff;
	--navy-700: #d3dcff;
	--bg: #0f1a32;
	--surface: #162442;
	--surface-soft: #1d2d50;
	--surface-hover: #263a63;
	--editor-surface: #121f39;
	--editor-toolbar-surface: var(--surface-soft);
	--line: #30486f;
	--line-strong: #4d6895;
	--text: #f8faff;
	--text-soft: #d9e2f2;
	--muted: #9aa9c3;
	--primary: #9fb4ff;
	--primary-hover: #c2ceff;
	--primary-soft: #273b66;
	--cyan: #87b8d1;
	--cyan-soft: #1b3340;
	--amber: #f1c36f;
	--amber-soft: #3b3020;
	--violet: #adbaf0;
	--violet-soft: #292d49;
	--danger: #ff7795;
	--danger-soft: #40212e;
	--success: #66d3c4;
	--success-soft: #173a36;
	--flat-shadow: 0 1px 0 rgba(255, 255, 255, .035);
	--control-shadow: none;
	--control-shadow-hover: none;
	--control-shadow-active: none;
	--overlay-shadow: 0 22px 56px rgba(1, 7, 20, .48);
	--theme-nav-active: #ffffff;
	--theme-nav-icon-active: var(--theme-nav-active);
	--theme-nav-inactive: #71819e;
	--theme-nav-background: rgba(10, 20, 41, .97);
	--theme-nav-line: #36517f;
	--theme-nav-line-height: 3px;
	--theme-nav-glow: rgba(255, 255, 255, .56);
	--theme-nav-indicator-width: 28px;
	--theme-nav-indicator-height: 4px;
	--theme-nav-brightness: 1.16;
	--theme-nav-brightness-peak: 1.28;
	--theme-nav-brightness-soft: 1.21;
}

html[data-theme="dark"] {
	background:
		radial-gradient(72% 54% at 82% -8%, rgba(102, 80, 157, .38) 0%, transparent 66%),
		radial-gradient(58% 60% at -6% 38%, rgba(29, 103, 101, .14) 0%, transparent 70%),
		radial-gradient(64% 52% at 4% 34%, rgba(44, 66, 112, .2) 0%, transparent 68%),
		radial-gradient(52% 46% at 72% 92%, rgba(139, 74, 88, .18) 0%, transparent 72%),
		linear-gradient(145deg, #101f3d 0%, #0e1931 50%, #09142a 100%);
	background-attachment: fixed;
	color: var(--text);
}

html[data-theme="dark"] body {
	background: transparent;
	color: var(--text);
}

html[data-theme="dark"] :is(.site, .layout, .main) {
	background: transparent;
	color: var(--text);
}

html[data-theme="dark"] .site-header {
	border-bottom-color: #2f4770;
	background: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	box-shadow: none;
}

html[data-theme="dark"] .brand-logo {
	background-image: var(--brand-logo-dark, url("/olo3o0o/assets/images/site-logo-24-dark.svg?v=0.15.608"));
	filter: none;
	opacity: 1;
}

/* Section headings use the theme brand color, not the near-black body text. */
html:not([data-theme="dark"]) body[data-layout] :is(.page-title, .panel-title, .home-fortune .profileHeading h1, .home-fortune .sectionHeading h2) {
	color: var(--primary);
}

html[data-theme="dark"] .side-nav {
	border-right-color: var(--line);
	background: transparent;
}

html[data-theme="dark"] :is(
	.panel,
	.auth-panel,
	.account-hero,
	.profile-card,
	.board-card,
	.quick-action,
	.write-board-option,
	.profile-photo-control,
	.preference-toggle,
	.compact-toggle,
	.notification-settings-panel,
	.chat-list-panel,
	.chat-room-panel,
	.comment-composer,
	.app-dialog,
	.app-dialog-wide,
	.header-menu-popover
) {
	border-color: var(--line);
	background-color: var(--surface);
	box-shadow: var(--flat-shadow);
}

html[data-theme="dark"] :is(
	.panel-head,
	.post-header,
	.post-actions,
	.comment,
	.message-row,
	.notification-row,
	.account-menu-row,
	.account-activity-row,
	.account-session-row,
	.chat-room-header,
	.chat-composer,
	.notification-preference
) {
	border-color: var(--line);
}

html[data-theme="dark"] :is(
	.page-title,
	.panel-title,
	.post-title,
	.comment-author strong,
	.post-author-name strong,
	.account-menu-copy strong,
	.account-activity-main strong,
	.message-copy strong,
	.notification-copy strong,
	.field-label,
	.signup-stage-head h2,
	.app-dialog h2
) {
	color: var(--text);
}

html[data-theme="dark"] :is(
	.page-description,
	.field-help,
	.list-meta,
	.meta-row,
	.latest-story-meta,
	.comment-author time,
	.post-meta,
	.account-menu-copy small,
	.message-copy small,
	.notification-copy small,
	.app-dialog p
) {
	color: var(--muted);
}

html[data-theme="dark"] :is(
	.button,
	.icon-button,
	.header-auth-link,
	.context-back,
	.profile-edit-action,
	.composer-mode,
	.composer-attach,
	.board-search-toggle,
	.post-message-link,
	.post-list-link,
	.comment-reply,
	.post-vote-button,
	.post-report-button,
	.content-more,
	.comment-refresh
) {
	border-color: var(--line-strong);
	background-color: var(--surface-soft);
	box-shadow: none;
	color: var(--text-soft);
}

html[data-theme="dark"] :is(
	.button,
	.icon-button,
	.header-auth-link,
	.context-back,
	.profile-edit-action,
	.composer-mode,
	.composer-attach,
	.board-search-toggle,
	.post-message-link,
	.post-list-link,
	.comment-reply,
	.post-vote-button,
	.post-report-button,
	.content-more,
	.comment-refresh
):hover:not(:disabled) {
	border-color: #627ca9;
	background-color: var(--surface-hover);
	color: var(--text);
}

html[data-theme="dark"] :is(.button.primary, .header-auth-link.login, .editor-modes .button.primary) {
	border-color: #6f87dc;
	background: #6178cf;
	color: #fff;
}

html[data-theme="dark"] :is(.button.primary, .header-auth-link.login, .editor-modes .button.primary):hover:not(:disabled) {
	border-color: #8399e7;
	background: #7187d9;
	color: #fff;
}

html[data-theme="dark"] .button.danger {
	border-color: #6b3445;
	background: var(--danger-soft);
	color: var(--danger);
}

html[data-theme="dark"] :is(.input, .select, .textarea, .message-composer-input, .comment-composer-input) {
	border-color: var(--line-strong);
	background: var(--editor-surface);
	color: var(--text);
}

html[data-theme="dark"] :is(.input, .select, .textarea, .message-composer-input, .comment-composer-input)::placeholder {
	color: #7f8aa2;
}

html[data-theme="dark"] :is(.input, .select, .textarea, .message-composer-input, .comment-composer-input):focus {
	border-color: #8ca5f5;
	box-shadow: 0 0 0 3px rgba(140, 165, 245, .2);
}

html[data-theme="dark"] :is(.nav-link, .bottom-link) {
	color: var(--muted);
}

html[data-theme="dark"] :is(.nav-link, .bottom-link):hover,
html[data-theme="dark"] :is(.nav-link, .bottom-link).active {
	background: var(--primary-soft);
	color: var(--theme-nav-active);
}

html[data-theme="dark"] :is(.nav-count, .menu-shortcut-count, .bottom-count) {
	background: #8299ef;
	color: #fff;
}

html[data-theme="dark"] .header-menu-popover {
	border-color: #3b5684;
	background: linear-gradient(145deg, rgba(29, 46, 82, .99) 0%, rgba(20, 34, 62, .99) 100%);
	box-shadow:
		0 22px 54px rgba(1, 7, 20, .58),
		0 6px 18px rgba(1, 7, 20, .34);
}

html[data-theme="dark"] :is(.menu-shortcut, .menu-board-link, .menu-theme-toggle) {
	border-color: transparent;
	background: linear-gradient(145deg, #263b63 0%, #213456 100%);
	color: #e4ebf8;
}

html[data-theme="dark"] .menu-board-link.active {
	border-color: transparent;
	background: linear-gradient(145deg, #304a78 0%, #293f68 100%);
	color: var(--text);
}

@media (hover: hover) and (pointer: fine) {
	html[data-theme="dark"] :is(.menu-shortcut, .menu-board-link, .menu-theme-toggle):hover {
		border-color: transparent;
		background: linear-gradient(145deg, #304a78 0%, #293f68 100%);
		color: var(--text);
	}
}

html[data-theme="dark"] :is(
	.board-card-icon,
	.quick-action-icon,
	.empty-pixel,
	.account-avatar,
	.list-avatar,
	.message-avatar,
	.chat-avatar,
	.comment-avatar,
	.user-avatar,
	.account-activity-icon,
	.notification-preference-icon
) {
	background: var(--primary-soft);
	color: var(--primary-hover);
}

html[data-theme="dark"] .user-avatar img {
	background: var(--surface-soft);
}

html[data-theme="dark"] .hero {
	border-color: #3b5684;
	background:
		radial-gradient(circle at 78% 18%, rgba(70, 99, 164, .44), transparent 20rem),
		linear-gradient(145deg, #24385f 0%, #1b2c50 54%, #14213d 100%);
	box-shadow: 0 22px 52px rgba(1, 7, 20, .3);
}

html[data-theme="dark"] .hero .button.primary,
html[data-theme="dark"] .hero .button.primary:hover:not(:disabled) {
	border-color: rgba(255, 255, 255, .2);
	background: #f5f7ff;
	color: #1b285f;
}

html[data-theme="dark"] :is(.board-card, .quick-action, .write-board-option, .account-menu-row, .account-activity-row, .message-row, .notification-row):hover {
	border-color: var(--line-strong);
	background: var(--surface-hover);
}

html[data-theme="dark"] :is(.board-card, .quick-action):hover {
	color: #fff;
}

html[data-theme="dark"] .board-card .board-card-icon {
	background: var(--primary-soft);
	color: var(--primary-hover);
	transition: background-color .14s ease, color .14s ease;
}

html[data-theme="dark"] .latest-panel .latest-story-row:hover,
html[data-theme="dark"] .view-board .board-post-row:hover,
html[data-theme="dark"] .account-activity-row:hover {
	background: var(--surface-hover);
}

html[data-theme="dark"] :is(.list > li + li, .message-list > li + li, .account-activity-list > li + li, .account-session-list > li + li) {
	border-color: var(--line);
}

html[data-theme="dark"] :is(
	.latest-panel .latest-story-row .list-avatar,
	.view-board .board-post-row .list-avatar,
	.account-activity-icon,
	.account-activity-icon.is-comment
) {
	background: var(--primary-soft);
	color: var(--primary-hover);
}

html[data-theme="dark"] :is(
	.latest-panel .latest-story-row:hover .list-avatar,
	.view-board .board-post-row:hover .list-avatar,
	.account-activity-row:hover .account-activity-icon,
	.account-activity-row:hover .account-activity-icon.is-comment
) {
	background: #2a3452;
}

html[data-theme="dark"] :is(.content-action-menu, .member-action-menu) {
	border-color: var(--line-strong);
	background: var(--surface);
	box-shadow: var(--overlay-shadow);
}

html[data-theme="dark"] :is(.board-card, .quick-action, .write-board-option) {
	background: linear-gradient(145deg, #192947 0%, #15223c 100%);
}

html[data-theme="dark"] :is(.content-action-menu a, .content-action-menu button):hover {
	background: var(--surface-hover);
}

html[data-theme="dark"] :is(.profile-cover, .account-stat, .message-tabs) {
	background: var(--surface-soft);
}

html[data-theme="dark"] .comment.reply {
	background: linear-gradient(90deg, #1e263a, var(--surface) 108px);
}

html[data-theme="dark"] .comment.is-editing {
	background: #1c263b;
	box-shadow: inset 3px 0 0 #7f94e6;
}

html[data-theme="dark"] :is(.post-content, .comment-body, .message-content, .chat-bubble) {
	color: var(--text);
}

html[data-theme="dark"] .post-actions {
	background: var(--surface-soft);
}

html[data-theme="dark"] .bottom-nav {
	border-top-color: var(--theme-nav-line);
	background: var(--theme-nav-background);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	box-shadow: 0 -8px 26px rgba(1, 7, 20, .24);
}

html[data-theme="dark"] :is(.badge, .pager-current, .recipient-chip, .member-group-chip, .comment-own) {
	background: var(--primary-soft);
	color: var(--primary-hover);
}

html[data-theme="dark"] .member-group-chip {
	--member-group-chip-color: #fff;
	border-color: var(--line-strong);
	background: var(--primary-soft);
	color: #fff !important;
}

html[data-theme="dark"] .account-stat-icon.violet {
	background: var(--primary-soft);
	color: var(--primary);
}

html[data-theme="dark"] :is(.pager-button, .pager-link) {
	border-color: var(--line);
	background: var(--surface);
	color: var(--text-soft);
}

/* Current page is selected, not disabled; unavailable navigation stays subdued. */
body[data-layout="current"] .pager .button:is(.pager-current, [aria-current="page"]),
html[data-theme="dark"] body[data-layout="current"] .pager .button:is(.pager-current, [aria-current="page"]) {
	border-color: var(--primary);
	background: var(--primary);
	color: #fff;
	font-weight: 800;
	opacity: 1;
	box-shadow: none;
}

html[data-theme="dark"] body[data-layout="current"] .pager .button:is(.pager-current, [aria-current="page"]) {
	color: #101a32;
}

body[data-layout="current"] .pager .button:disabled:not(.pager-current):not([aria-current="page"]),
html[data-theme="dark"] body[data-layout="current"] .pager .button:disabled:not(.pager-current):not([aria-current="page"]) {
	border-color: var(--line);
	background: transparent;
	color: var(--muted);
	opacity: .38;
	box-shadow: none;
	cursor: not-allowed;
}

html[data-theme="dark"] :is(.check-row span::before, .compact-toggle-box, .preference-toggle-track) {
	border-color: var(--line-strong);
	background: #252d3e;
}

html[data-theme="dark"] :is(.check-row input:checked + span::before, .compact-toggle input:checked + .compact-toggle-box, .preference-toggle input:checked + .preference-toggle-track) {
	border-color: #6579d0;
	background: #6579d0;
}

html[data-theme="dark"] .signup-stepper {
	border-color: var(--line);
	background: var(--surface-soft);
}

html[data-theme="dark"] .signup-step.active {
	background: var(--primary-soft);
	color: var(--text);
}

html[data-theme="dark"] .terms-scroll,
html[data-theme="dark"] .agreement-scroll {
	border-color: var(--line);
	background: #111726;
	color: var(--text-soft);
}

html[data-theme="dark"] .app-toast {
	border-color: var(--line-strong);
	background: #192947;
	color: var(--text);
}

html[data-theme="dark"] .app-toast.error {
	border-color: #6b3445;
	background: #291923;
}

html[data-theme="dark"] .rx-ckeditor5 {
	--ck-color-base-background: var(--editor-surface);
	--ck-color-base-foreground: var(--surface-soft);
	--ck-color-base-border: var(--line);
	--ck-color-base-text: #f2f4fa;
	--ck-color-text: #f2f4fa;
	--ck-color-input-background: var(--editor-surface);
	--ck-color-input-text: #f2f4fa;
	--ck-color-toolbar-background: var(--editor-toolbar-surface);
	--ck-color-button-default-hover-background: var(--surface-hover);
	--ck-color-button-on-background: var(--primary-soft);
	--ck-color-focus-border: #7f94e6;
}

/* 명시적인 밝은 배경을 사용하는 공통 컴포넌트의 어두운 화면 표면 */
html[data-theme="dark"] :is(
	.file-picker,
	.editor-modes,
	.upload-drop,
	.member-info-item,
	.message-row,
	.profile-crop-actions,
	.profile-crop-close,
	.chat-room-menu-popover,
	.chat-composer,
	.birthday-control,
	.write-board-option-icon
) {
	border-color: var(--line);
	background: var(--surface);
	color: var(--text);
}

html[data-theme="dark"] .profile-crop-stage {
	background: #0b172d;
	box-shadow: inset 0 0 0 1px var(--line);
}

html[data-theme="dark"] .profile-crop-loading > span {
	background: #2d374c;
}

html[data-theme="dark"] .notification-empty-icon {
	border-color: var(--line-strong);
	background: linear-gradient(145deg, #233657, #172744);
	color: #b8c7ff;
}

html[data-theme="dark"] .notification-empty-icon::after {
	border-color: var(--surface);
	background: #89a0f2;
}

html[data-theme="dark"] .editor-modes {
	box-shadow: none;
}

html[data-theme="dark"] .message-row.active {
	background: var(--primary-soft);
}

html[data-theme="dark"] :is(
	.signup-step span,
	.profile-photo-placeholder,
	.blocked-member-avatar
) {
	border-color: var(--line-strong);
	background: var(--primary-soft);
	color: var(--primary-hover);
}

html[data-theme="dark"] .profile-photo-preview {
	border-color: var(--line-strong);
	background: var(--primary-soft);
}

/* 프로필 대표 사진은 외곽선 없이 하단 강조선만 사용합니다. */
.profile-card .profile-avatar {
	position: relative;
	border: 0;
}

.profile-card .profile-avatar::after {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 3px;
	background: #263b7a;
	content: "";
	pointer-events: none;
}

html[data-theme="dark"] .profile-card .profile-avatar {
	border: 0;
}

html[data-theme="dark"] .profile-card .profile-avatar::after {
	background: #c2ceff;
}

html[data-theme="dark"] .withdrawn-badge {
	border-color: #6b3445;
	background: var(--danger-soft);
	color: #ff9ab0;
}

html[data-theme="dark"] :is(
	.member-info-item strong,
	.profile-intro p,
	.account-identity-copy h2,
	.account-stat strong,
	.chat-summary strong,
	.chat-room-person h2,
	.notification-setting-copy strong
) {
	color: var(--text);
}

html[data-theme="dark"] .account-profile-link:is(:hover, :focus-visible) {
	background: var(--surface-hover);
}

html[data-theme="dark"] :is(.account-identity-copy p, .account-profile-chevron) {
	color: var(--muted);
}

html[data-theme="dark"] .birthday-segment:focus-within {
	background: transparent;
}

html[data-theme="dark"] .birthday-segment input {
	color: var(--text);
}

html[data-theme="dark"] .birthday-segment input::placeholder {
	color: #7f8aa2;
}

html[data-theme="dark"] :is(.birthday-control, .birth-profile-segmented) {
	border-color: var(--line-strong);
	background: var(--editor-surface);
}

html[data-theme="dark"] .birth-profile-segmented button {
	color: var(--muted);
}

html[data-theme="dark"] .birth-profile-segmented button:hover {
	color: var(--text);
}

html[data-theme="dark"] .birth-profile-segmented button.active {
	background: #6178cf;
	color: #fff;
}

html[data-theme="dark"] .birth-time-input:disabled {
	border-color: var(--line);
	background: var(--surface-soft);
	color: var(--muted);
}

html[data-theme="dark"] .chat-bubble {
	border-color: var(--line-strong);
	background: var(--surface-soft);
	color: var(--text);
}

html[data-theme="dark"] .chat-bubble-row.outgoing .chat-bubble {
	border-color: #6177ac;
	background: #4b6098;
	color: #f8faff;
}

html[data-theme="dark"] .chat-history {
	background: linear-gradient(180deg, #142440 0%, #101e38 100%);
}

@media (max-width: 700px) {
	html[data-theme="dark"] .view-chat:has(.chat-workspace.room-open) {
		background: #0e1a31;
	}

	html[data-theme="dark"] .chat-workspace.room-open .chat-room,
	html[data-theme="dark"] .chat-workspace.room-open .chat-room-head,
	html[data-theme="dark"] .chat-workspace.room-open .chat-composer {
		background: #142440;
	}
}

html[data-theme="dark"] .chat-composer .button.primary:disabled {
	border-color: #3d527b;
	background: #293d65;
	color: #8999bd;
	opacity: 1;
}

html[data-theme="light"] .chat-bubble-row.outgoing .chat-bubble {
	border-color: var(--chat-message-accent);
	background: var(--chat-message-accent);
	color: #fff;
}

html[data-theme="light"] .chat-composer .textarea:focus {
	border-color: var(--chat-message-accent);
	box-shadow: 0 0 0 3px rgba(75, 93, 136, .14);
}

html[data-theme="light"] .chat-composer .button.primary {
	border-color: var(--chat-message-accent);
	background: var(--chat-message-accent);
	color: #fff;
	opacity: 1;
}

html[data-theme="light"] .chat-composer .button.primary:hover:not(:disabled) {
	border-color: var(--chat-message-accent-hover);
	background: var(--chat-message-accent-hover);
}

html[data-theme="light"] .chat-composer .button.primary:disabled {
	border-color: #d7ddea;
	background: var(--chat-message-accent-soft);
	color: var(--chat-message-accent-muted);
	opacity: 1;
}

html[data-theme="dark"] .chat-room-menu-popover button:hover {
	background: var(--surface-hover);
}

html[data-theme="dark"] .alert.info {
	border-color: #48699b;
	background: #1b3155;
	color: #cfdaff;
}

html[data-theme="dark"] .alert.error {
	border-color: #6b3445;
	background: var(--danger-soft);
	color: #ff9ab0;
}

html[data-theme="dark"] .rx-ckeditor5 .rx-ckeditor5__toolbar-toggle {
	border-color: var(--line-strong);
	background: var(--surface-soft);
	color: var(--text-soft);
	opacity: 1;
}

html[data-theme="dark"] .rx-ckeditor5 .rx-ckeditor5__toolbar-toggle:hover {
	background: var(--surface-hover);
	color: var(--text);
}

html[data-theme="dark"] #rx-editor-host .rx-ckeditor5--light .ck-editor__editable,
html[data-theme="dark"] #rx-editor-host .rx-ckeditor5--light .ck-editor__editable.ck-focused {
	background: var(--editor-surface);
	color: var(--text);
}

body[data-layout] .compose-title-row .page-title {
	font-size: 18px;
}

body[data-layout] .header-main {
	width: min(100%, var(--page));
	max-width: var(--page);
	margin-inline: auto;
	padding-right: max(var(--page-gutter), calc(13px + env(safe-area-inset-right, 0px)));
	padding-left: max(var(--page-gutter), calc(13px + env(safe-area-inset-left, 0px)));
}

.menu-theme-toggle {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr) auto;
	align-items: center;
	gap: 11px;
	width: 100%;
	min-height: 50px;
	margin: 10px 0 4px;
	padding: 7px 10px;
	border: 0;
	border-radius: 11px;
	background: var(--surface-soft);
	color: var(--text-soft);
	text-align: left;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

@media (hover: hover) and (pointer: fine) {
	.menu-theme-toggle:hover {
		background: var(--surface-hover);
		color: var(--text);
	}
}

.menu-board-link,
.menu-board-link:hover,
.menu-board-link.active,
.menu-board-link:active,
.menu-logout,
.menu-login {
	border: 0;
	box-shadow: none;
}

html[data-theme="light"] .menu-logout:hover {
	background: #ffe4eb;
	color: #c72e51;
}

html[data-theme="light"] .menu-login:hover {
	background: #dfe5f7;
	color: var(--primary-hover);
}

.menu-theme-toggle:active {
	transform: translateY(1px) scale(.99);
}

.menu-theme-icon {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--primary-soft);
	color: var(--navy-800);
}

.menu-theme-icon svg {
	width: 19px;
	height: 19px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8px;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.menu-theme-icon .theme-icon-sun {
	display: none;
}

html[data-theme="dark"] .menu-theme-icon .theme-icon-moon {
	display: none;
}

html[data-theme="dark"] .menu-theme-icon .theme-icon-sun {
	display: block;
}

.menu-theme-copy {
	display: grid;
	gap: 1px;
	min-width: 0;
}

.menu-theme-copy strong {
	font-size: 14px;
	font-weight: 800;
	line-height: 1.35;
}

.menu-theme-copy small {
	color: var(--muted);
	font-size: 12px;
	line-height: 1.35;
}

.menu-theme-switch {
	position: relative;
	width: 42px;
	height: 24px;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	background: #dfe4ee;
	transition: border-color .16s ease, background-color .16s ease;
}

.menu-theme-switch::after {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(20, 28, 55, .18);
	content: "";
	transition: transform .16s ease;
}

html[data-theme="dark"] .menu-theme-switch {
	border-color: #7185dc;
	background: #5b6fc7;
}

html[data-theme="dark"] .menu-theme-switch::after {
	transform: translateX(18px);
}

html[data-theme="dark"] .menu-theme-icon {
	background: #20375a;
	color: #d4ddff;
}

/* 1안: 밝은 화면은 기존의 선명한 화이트를 유지하고 어두운 화면은 깊은 네이비로 통일합니다. */
:is(
	.header-menu-popover,
	.content-action-menu,
	.member-action-menu,
	.chat-room-menu-popover,
	.app-dialog,
	.app-dialog-wide,
	.app-toast
) {
	border-color: var(--line);
	background-color: var(--surface);
}

:is(
	.menu-shortcut,
	.menu-board-link,
	.menu-theme-toggle,
	.content-action-menu a,
	.content-action-menu button,
	.chat-room-menu-popover button
) {
	transition: border-color .15s ease, background-color .15s ease, color .15s ease, transform .15s ease;
}

:is(.page-title-link, .auth-inline-link, .account-guest-link, .chat-earlier):hover {
	color: var(--primary);
}

html[data-theme="dark"] :is(.menu-popover-head strong, .app-dialog-head h2, .chat-room-menu-popover button) {
	color: var(--text);
}

html[data-theme="dark"] :is(.menu-popover-head span, .menu-section-title, .chat-room-menu-popover > strong) {
	color: var(--muted);
}

html[data-theme="dark"] :is(
	.content-action-menu a,
	.content-action-menu button,
	.chat-room-menu-popover button
) {
	color: var(--text-soft);
}

html[data-theme="dark"] :is(
	.content-action-menu a,
	.content-action-menu button,
	.chat-room-menu-popover button
):hover {
	background: var(--surface-hover);
	color: var(--text);
}

html[data-theme="dark"] :is(.content-action-menu .danger, .chat-room-menu-popover button.danger, .menu-logout) {
	color: var(--danger);
}

html[data-theme="dark"] .menu-logout {
	border: 0;
	background: #5b6fc7;
	color: #fff8f5;
	font-weight: 800;
	opacity: 1;
	-webkit-text-fill-color: #fff8f5;
}

html[data-theme="dark"] .menu-logout span {
	color: #fff8f5;
	opacity: 1;
	-webkit-text-fill-color: #fff8f5;
}

html[data-theme="dark"] .menu-logout svg {
	color: #fff8f5;
	stroke: #fff8f5;
	filter: none;
}

html[data-theme="dark"] .chat-room-menu-popover button.danger:hover {
	border-color: transparent;
	background: #71384f;
	color: #ffc0cf;
}

html[data-theme="dark"] .menu-logout:hover {
	border-color: transparent;
	background: #6b7fd3;
	color: #fff8f5;
}

html[data-theme="dark"] .menu-login {
	border: 0;
	background: #5b6fc7;
	color: #fff;
}

html[data-theme="dark"] .menu-login:hover {
	background: #6b7fd3;
	color: #fff;
}

html[data-theme="dark"] :is(.app-dialog-backdrop, .profileModal) {
	background: rgba(3, 9, 23, .72);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}

@media (max-width: 860px) {
	.bottom-nav {
		border-top: var(--theme-nav-line-height) solid var(--theme-nav-line);
		background: var(--theme-nav-background);
		box-shadow:
			0 -1px 0 rgba(8, 17, 38, .12),
			inset 0 1px 0 rgba(255, 255, 255, .08),
			0 -8px 26px rgba(1, 7, 20, .18);
	}

	html[data-theme="light"] .bottom-nav {
		box-shadow:
			0 -1px 0 rgba(30, 42, 102, .035),
			inset 0 1px 0 rgba(255, 255, 255, .9),
			0 -8px 26px rgba(30, 42, 102, .08);
	}

	.bottom-link {
		position: relative;
		border-radius: 0;
		background: transparent !important;
		color: var(--theme-nav-inactive);
		padding: 0 1px 3px;
	}

	.bottom-icon {
		display: grid;
		width: 24px;
		height: 24px;
		flex: 0 0 24px;
		place-items: center;
	}

	body[data-layout="current"] .bottom-icon svg {
		width: 24px;
		height: 24px;
	}

	body[data-layout="current"] :is(.bottom-icon--fortune, .bottom-icon--chat) svg {
		width: 25px;
		height: 25px;
	}

	body[data-layout="current"] .bottom-icon--user svg {
		top: -1.5px;
		width: 28px;
		height: 28px;
		position: relative;
	}

	.bottom-link::before {
		position: absolute;
		top: calc(-5px - var(--theme-nav-line-height));
		left: 50%;
		width: var(--theme-nav-indicator-width);
		height: var(--theme-nav-indicator-height);
		transform: translate(-50%, -3px) scaleX(.78);
		border-radius: 0 0 2px 2px;
		background: var(--theme-nav-active);
		box-shadow: 0 0 4px var(--theme-nav-glow);
		content: "";
		opacity: 0;
		transition: transform .26s cubic-bezier(.22, .72, .22, 1), opacity .2s ease;
	}

	.bottom-link:is(.active, .nav-pop, :active) {
		background: transparent !important;
		color: var(--theme-nav-active);
	}

	@media (hover: hover) and (pointer: fine) {
		.bottom-link:hover {
			background: transparent !important;
			color: var(--theme-nav-active);
		}
	}

	@media (hover: none), (pointer: coarse) {
		.bottom-link:not(.active):hover {
			color: var(--theme-nav-inactive);
		}
	}

	.bottom-link.active::before {
		transform: translate(-50%, 0) scaleX(1);
		opacity: 1;
	}

	.bottom-link.active {
		font-weight: 800;
		text-shadow: 0 0 4px var(--theme-nav-glow);
	}

	.bottom-link:is(.active, .nav-pop) .bottom-icon,
	.bottom-link:is(.active, .nav-pop) .bottom-icon svg {
		color: var(--theme-nav-icon-active);
		stroke: var(--theme-nav-icon-active);
	}

	.bottom-link.active .bottom-icon {
		animation: theme-nav-bright-signal 2.2s ease-in-out infinite;
	}

	.bottom-link > .bottom-icon {
		transition: transform .15s cubic-bezier(.22, .72, .22, 1);
	}

	.bottom-link:active > .bottom-icon {
		transform: translateY(2px) scale(.92);
	}

	.bottom-link.nav-pop .bottom-icon svg {
		transform-box: fill-box;
		transform-origin: center;
		animation: theme-nav-select-pop .44s cubic-bezier(.22, .78, .22, 1) both;
	}

	.bottom-link.nav-pop::before {
		animation: theme-nav-indicator-touch .44s cubic-bezier(.22, .78, .22, 1) both;
	}

	html[data-theme="light"] .bottom-link.active {
		font-weight: 750;
		text-shadow: none;
	}

	html[data-theme="light"] .bottom-link.active .bottom-icon {
		animation-name: theme-nav-signal;
	}
}

@keyframes theme-nav-signal {
	0%, 100% {
		opacity: 1;
		filter: drop-shadow(0 0 0 transparent);
	}
	48% {
		opacity: .62;
		filter: drop-shadow(0 0 6px var(--theme-nav-glow));
	}
	62% {
		opacity: 1;
		filter: drop-shadow(0 0 3px var(--theme-nav-glow));
	}
}

@keyframes theme-nav-bright-signal {
	0%, 100% {
		opacity: 1;
		filter: drop-shadow(0 0 1px var(--theme-nav-glow));
	}
	48% {
		opacity: 1;
		filter: drop-shadow(0 0 4px var(--theme-nav-glow));
	}
	62% {
		opacity: 1;
		filter: drop-shadow(0 0 2px var(--theme-nav-glow));
	}
}

@keyframes theme-nav-select-pop {
	0% {
		transform: translateY(0) scale(1);
	}
	42% {
		transform: translateY(-8px) scale(1.12);
	}
	72% {
		transform: translateY(.5px) scale(.985);
	}
	100% {
		transform: translateY(0) scale(1);
	}
}

@keyframes theme-nav-indicator-touch {
	0% {
		transform: translate(-50%, 0) scaleX(.88);
		opacity: .62;
		box-shadow: 0 0 2px var(--theme-nav-glow);
	}
	42% {
		transform: translate(-50%, 0) scaleX(1.08);
		opacity: 1;
		box-shadow: 0 0 6px var(--theme-nav-glow);
	}
	72% {
		transform: translate(-50%, 0) scaleX(.98);
		opacity: .9;
		box-shadow: 0 0 3px var(--theme-nav-glow);
	}
	100% {
		transform: translate(-50%, 0) scaleX(1);
		opacity: 1;
		box-shadow: 0 0 4px var(--theme-nav-glow);
	}
}

.post-content > :is(p, ul, ol, blockquote, pre, h2, h3, h4) {
	max-width: none;
}

@media (max-width: 860px) {
	:root {
		--type-body: 15px;
		--type-control: 14px;
		--type-meta: 13px;
		--type-caption: 12px;
		--type-section: 19px;
	}

	body[data-layout] .main {
		padding-bottom: calc(var(--bottom) + env(safe-area-inset-bottom, 0px) + 24px);
	}

	body[data-layout][data-page="post"] .main,
	body[data-layout][data-page="write"] .main,
	body[data-layout][data-page="signup"] .main,
	body[data-layout][data-page="login"] .main,
	body[data-layout][data-page="forgot-password"] .main,
	body[data-layout][data-page="reset-password"] .main,
	body[data-layout][data-page="account-edit"] .main,
	body[data-layout][data-page="account-password"] .main,
	body[data-layout][data-page="account-email"] .main {
		padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 28px);
	}

	body[data-layout][data-page="post"] .main.post-comment-floating {
		padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--comment-composer-clearance, 168px));
	}

body[data-layout][data-page="post"] .comment-composer.floating {
		box-shadow:
			0 -14px 0 var(--bg),
			0 12px 34px rgba(24, 29, 39, .16);
	}

	body[data-layout][data-page="chat"] .main {
		padding-bottom: calc(var(--bottom) + env(safe-area-inset-bottom, 0px) + 20px);
	}

	.page-description,
	.hero-copy {
		font-size: 14px;
		line-height: 1.58;
	}

	:is(.latest-story-main, .board-post-main, .account-activity-main, .message-copy) strong {
		font-size: 14px;
		line-height: 1.42;
	}

	:is(.list-meta, .meta-row, .latest-story-meta, .board-post-meta-row, .comment-author time) {
		font-size: 12px;
		line-height: 1.45;
	}

	.comment-body,
	.post-content,
	.message-content {
		font-size: 15px;
		line-height: 1.68;
	}

	.comment-reply {
		min-height: 34px;
		padding: 5px 10px;
		font-size: 13px;
	}

	:is(.content-more, .board-search-toggle) {
		width: 40px;
		height: 40px;
		min-width: 40px;
	}

	.header-auth-icon,
	.menu-button,
	.user-avatar {
		width: 40px;
		height: 40px;
		min-width: 40px;
	}

	.bottom-link {
		min-height: 52px;
		font-size: 12px;
	}
}

/* 로고를 제외한 헤더 우측 컨트롤의 공통 입체감 */
.site-header .header-actions :is(.header-auth-icon, .user-avatar, .menu-button) {
	box-shadow: 0 5px 14px rgba(30, 41, 59, .1);
}

.site-header .header-actions .user-avatar {
	box-shadow: 0 5px 14px rgba(30, 41, 59, .1);
}

@media (hover: hover) and (pointer: fine) {
	.site-header .header-actions :is(.header-auth-icon, .menu-button):hover,
	.site-header .header-actions .user-chip:hover .user-avatar {
		box-shadow: 0 7px 18px rgba(30, 41, 59, .13);
	}
}

.site-header .header-actions :is(.header-auth-icon, .menu-button):active,
.site-header .header-actions .user-chip:active .user-avatar {
	box-shadow: 0 2px 7px rgba(30, 41, 59, .1);
	transform: translateY(1px) scale(.96) !important;
}

html[data-theme="dark"] .site-header .header-actions :is(.header-auth-icon, .user-avatar, .menu-button) {
	box-shadow: 0 6px 16px rgba(1, 7, 20, .34);
}

html[data-theme="dark"] .site-header .header-actions .user-avatar {
	box-shadow: 0 6px 16px rgba(1, 7, 20, .55);
}

@media (hover: hover) and (pointer: fine) {
	html[data-theme="dark"] .site-header .header-actions :is(.header-auth-icon, .menu-button):hover,
	html[data-theme="dark"] .site-header .header-actions .user-chip:hover .user-avatar {
		box-shadow: 0 8px 20px rgba(1, 7, 20, .62);
	}
}

html[data-theme="dark"] .site-header .header-actions :is(.header-auth-icon, .menu-button):active,
html[data-theme="dark"] .site-header .header-actions .user-chip:active .user-avatar {
	box-shadow: 0 3px 8px rgba(1, 7, 20, .3);
	transform: translateY(1px) scale(.96) !important;
}

/* 터치 기기는 hover가 아닌 active/open 상태만 사용해 색상이 다음 터치까지 남지 않게 합니다. */
@media (hover: none), (pointer: coarse) {
	.site-header .header-actions .header-auth-icon:hover:not(:active) {
		border-color: rgba(30, 42, 102, .1);
		background: rgba(255, 255, 255, .94);
		box-shadow: 0 5px 14px rgba(30, 41, 59, .1);
		color: var(--navy-800);
		transform: none;
	}

	.site-header .header-actions .user-chip:hover:not(:active) .user-avatar {
		border-color: rgba(30, 42, 102, .1);
		box-shadow: 0 5px 14px rgba(30, 41, 59, .1);
		transform: none;
	}

	.site-header .header-actions .menu-button:not(.open):hover:not(:active) {
		border-color: rgba(30, 42, 102, .1);
		background: rgba(255, 255, 255, .94);
		box-shadow: 0 5px 14px rgba(30, 41, 59, .1);
		color: var(--navy-800);
		transform: none;
	}

	html[data-theme="dark"] .site-header .header-actions .header-auth-icon:hover:not(:active),
	html[data-theme="dark"] .site-header .header-actions .menu-button:not(.open):hover:not(:active) {
		border-color: var(--line-strong);
		background: var(--surface-soft);
		box-shadow: 0 6px 16px rgba(1, 7, 20, .34);
		color: var(--text-soft);
	}

	html[data-theme="dark"] .site-header .header-actions .user-chip:hover:not(:active) .user-avatar {
		border-color: var(--line-strong);
		background: var(--primary-soft);
		box-shadow: 0 6px 16px rgba(1, 7, 20, .55);
		color: var(--primary-hover);
	}
}

@media (max-width: 620px) {
	:root {
		--page-gutter: 13px;
		--type-title: clamp(23px, 6.2vw, 25px);
		--page-heading-size: var(--type-title);
	}

	body {
		font-size: 15px;
	}

	.page-head {
		gap: 12px;
	}

	body[data-layout] .page-title {
		font-size: var(--type-title);
		line-height: 1.25;
		letter-spacing: -.035em;
	}

	body[data-layout] .compose-title-row .page-title {
		font-size: 17px;
		letter-spacing: -.025em;
	}

	body[data-layout] .section-heading .page-title {
		font-size: 20px;
	}

	body[data-layout] .post-title {
		font-size: 22px;
		line-height: 1.34;
	}

	body[data-layout] :is(.latest-story-main .list-title, .board-post-row .list-title, .account-activity-main strong, .account-menu-copy strong, .message-copy strong) {
		font-size: 15px;
	}

	.page-description {
		margin-top: 3px;
	}

	.panel-title,
	.view-home .home-fortune :is(.profileHeading h1, .sectionHeading h2) {
		font-size: 18px;
	}

	.panel-head {
		min-height: 54px;
	}

	.field-label,
	.button,
	.preference-toggle-copy strong {
		font-size: 14px;
	}

	body[data-layout] .button:not(.small) {
		min-height: 42px;
	}

	body[data-layout] .page-head .icon-button {
		width: 42px;
		height: 42px;
		min-width: 42px;
	}

	.field-help,
	.preference-toggle-copy small,
	.notification-setting-copy small {
		font-size: 12px;
		line-height: 1.5;
	}

	.post-content {
		min-height: 132px;
		padding-block: 24px 32px;
	}

	.comment-author strong {
		font-size: 14px;
	}

	.comment-own,
	.comment-secret,
	.withdrawn-badge {
		font-size: 11px;
	}

	.menu-theme-toggle {
		min-height: 52px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.menu-theme-toggle,
	.menu-theme-switch,
	.menu-theme-switch::after {
		transition: none;
	}

	.bottom-link.active .bottom-icon {
		animation: none;
	}

	.bottom-link.nav-pop .bottom-icon svg {
		animation: none;
	}

	.bottom-link.nav-pop::before {
		animation: none;
	}
}

/* Header toggles stay anchored while pressed; only their open state changes. */
html .site-header .header-actions .header-menu-wrap .menu-button {
	transform: none !important;
	box-shadow: 0 5px 14px rgba(30, 41, 59, .1);
	transition: none;
}

html[data-theme="dark"] .site-header .header-actions .header-menu-wrap .menu-button {
	box-shadow: 0 6px 16px rgba(1, 7, 20, .34);
}

/* Destructive shortcuts keep their warning hue instead of adopting generic hover colors. */
html .button.delete-all-button:not(:disabled):is(:hover, :focus-visible, :active) {
	color: var(--danger);
	background: var(--danger-soft);
	border-color: var(--danger);
	box-shadow: none;
}

html .notification-clear:not(:disabled):is(:hover, :focus-visible, :active) {
	color: var(--muted);
	background: var(--surface-soft);
	border-radius: 6px;
}

html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
	transition: none !important;
}

html.theme-switching-lightweight::after {
	position: fixed;
	z-index: 2147483647;
	inset: 0;
	pointer-events: none;
	content: "";
	background: #f6f7fa;
	animation: olo3o0o-theme-overlay-out 180ms ease-out both;
}

html[data-theme="dark"].theme-switching-lightweight::after {
	background: #0f1a32;
}

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 160ms;
	animation-timing-function: ease-out;
}

::view-transition-old(root) {
	animation-name: olo3o0o-theme-fade-out;
}

::view-transition-new(root) {
	animation-name: olo3o0o-theme-fade-in;
}

@keyframes olo3o0o-theme-fade-out {
	to { opacity: 0; }
}

@keyframes olo3o0o-theme-fade-in {
	from { opacity: 0; }
}

@keyframes olo3o0o-theme-overlay-out {
	from { opacity: .18; }
	to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	::view-transition-old(root),
	::view-transition-new(root) {
		animation-duration: .01ms;
	}

	html.theme-switching-lightweight::after {
		animation-duration: .01ms;
	}
}