/* widget-embed.css — sandboxed raw code iframe */
/* 2026-06-10: Week 11 XSS isolation */

/* widget-embed.css — 2026-06-10: thin themed scrollbar on scrollable blocks */
.responsive-grid .grid-widget[data-widget-type="text"],
.responsive-grid .grid-widget.has-embed,
.page-preview-grid .grid-widget[data-widget-type="text"],
.page-preview-grid .grid-widget.has-embed { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--site-accent, #64748b) 50%, transparent) transparent; }
.responsive-grid .grid-widget[data-widget-type="text"]::-webkit-scrollbar,
.responsive-grid .grid-widget.has-embed::-webkit-scrollbar,
.page-preview-grid .grid-widget[data-widget-type="text"]::-webkit-scrollbar,
.page-preview-grid .grid-widget.has-embed::-webkit-scrollbar { width: 6px; height: 6px; }
.responsive-grid .grid-widget[data-widget-type="text"]::-webkit-scrollbar-track,
.responsive-grid .grid-widget.has-embed::-webkit-scrollbar-track,
.page-preview-grid .grid-widget[data-widget-type="text"]::-webkit-scrollbar-track,
.page-preview-grid .grid-widget.has-embed::-webkit-scrollbar-track { background: transparent; margin: 4px 0; }
.responsive-grid .grid-widget[data-widget-type="text"]::-webkit-scrollbar-thumb,
.responsive-grid .grid-widget.has-embed::-webkit-scrollbar-thumb,
.page-preview-grid .grid-widget[data-widget-type="text"]::-webkit-scrollbar-thumb,
.page-preview-grid .grid-widget.has-embed::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--site-accent, #64748b) 55%, var(--site-border, #cbd5e1)); border-radius: 999px; border: 1px solid transparent; background-clip: padding-box; min-height: 40px; }
.responsive-grid .grid-widget[data-widget-type="text"]::-webkit-scrollbar-thumb:hover,
.responsive-grid .grid-widget.has-embed::-webkit-scrollbar-thumb:hover,
.page-preview-grid .grid-widget[data-widget-type="text"]::-webkit-scrollbar-thumb:hover,
.page-preview-grid .grid-widget.has-embed::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--site-accent, #64748b) 72%, var(--site-muted, #94a3b8)); }

.raw-code-embed { width: 100%; min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; box-sizing: border-box; }
.raw-code-iframe { display: block; width: 100%; padding:5px 10px; min-height: 32px; height: auto; border: 0 solid var(--site-border, #e2e8f0); border-radius: 8px; background: #fff; overflow: auto; vertical-align: top; flex: 1 1 auto; box-sizing: border-box; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--site-accent, #64748b) 50%, transparent) transparent; }
.raw-code-iframe::-webkit-scrollbar { width: 6px; height: 6px; }
.raw-code-iframe::-webkit-scrollbar-track { background: transparent; margin: 4px 0; }
.raw-code-iframe::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--site-accent, #64748b) 55%, var(--site-border, #cbd5e1)); border-radius: 999px; border: 1px solid transparent; background-clip: padding-box; min-height: 40px; }
.raw-code-iframe::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--site-accent, #64748b) 72%, var(--site-muted, #94a3b8)); }
.grid-widget.has-embed { padding: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; box-sizing: border-box; }
.responsive-grid .grid-widget[data-widget-type="text"] { box-sizing: border-box; overflow: auto; -webkit-overflow-scrolling: touch; }
.grid-widget-html { line-height: var(--site-line-height, 1.8); white-space: normal; }
.grid-widget-html br { content: ''; }
.grid-widget-html img { max-width: 100%; height: auto; }
/* 2026-06-10: iframe margin inside text / raw-code widget content */
.grid-widget-html iframe { display: block; margin: 10px; max-width: calc(100% - 20px); box-sizing: border-box; border: 0; }
.grid-widget.has-embed .raw-code-embed { padding: 0; box-sizing: border-box; }
.grid-widget-hero { padding: 24px 16px; background: var(--site-surface, #f8fafc); border-radius: 8px; }
.grid-widget-hero h2 { margin: 0 0 8px; }
.grid-widget-hero-hint { margin: 8px 0 0; font-size: 0.82rem; opacity: 0.85; }
.grid-widget-figure { margin: 0; }
.grid-widget-image-link { display: block; text-decoration: none; }
.grid-widget-image-link:hover .grid-widget-image { opacity: 0.92; }
.grid-widget-image { max-width: 100%; height: auto; border-radius: 8px; display: block; }
.grid-widget-caption { margin: 10px 0 0; text-align: center; font-size: 0.95rem; font-weight: 600; color: var(--site-text, #0f172a); line-height: 1.4; }
.grid-widget-caption-link { color: inherit; text-decoration: none; }
.grid-widget-caption-link:hover { color: var(--site-accent, #0d9488); text-decoration: underline; }
.grid-widget-image-placeholder { padding: 40px 16px; text-align: center; color: var(--site-muted, #64748b); background: var(--site-surface, #f8fafc); border-radius: 8px; }
/* widget-embed.css — file include widget */
.grid-widget.has-file-include { box-sizing: border-box; overflow: auto; -webkit-overflow-scrolling: touch; }
.grid-widget-file-include-empty { margin: 0; padding: 15px; text-align: center; color: var(--site-muted, #64748b); font-size: 0.9rem; }
.grid-widget-file-include-text, .grid-widget-file-include-markdown { margin: 0; padding: 15px; white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: 0.95rem; line-height: var(--site-line-height, 1.8); color: var(--site-text, #0f172a); background: transparent; border: 0; }
.grid-widget-file-include-html { padding: 15px; line-height: var(--site-line-height, 1.8); }
.grid-widget-file-include-preview { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 72px; padding: 15px; text-align: center; color: var(--site-muted, #64748b); }
.grid-widget-file-include-preview strong { color: var(--site-text, #0f172a); word-break: break-all; }
.grid-widget-file-include-preview--empty i { font-size: 1.2rem; }

/* widget-embed.css — board feed widget */
.grid-widget.has-board-feed { display: flex; flex-direction: column; overflow: hidden; min-height: 0; padding: 0; }
.grid-widget.has-board-feed .board-feed-widget { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: 15px; box-sizing: border-box; }
.board-feed-widget { width: 100%; min-height: 0; }
.board-feed-widget--gallery { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.board-feed-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; flex-shrink: 0; }
.board-feed-heading { margin: 0; font-size: 1.1rem; flex: 1; min-width: 0; }
.board-feed-empty { margin: 0; color: var(--site-muted, #64748b); font-size: 0.9rem; }
.board-feed-list { list-style: none; margin: 0; padding: 0; }
.board-feed-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--site-border, #e2e8f0); }
.board-feed-list li:last-child { border-bottom: none; }
.board-feed-list a { color: var(--site-text, #0f172a); text-decoration: none; font-weight: 500; }
.board-feed-list a:hover { color: var(--site-accent, #0d9488); }
.board-feed-meta { color: var(--site-muted, #64748b); font-size: 0.82rem; white-space: nowrap; }
.board-feed-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.board-feed-card { padding: 12px; border: 1px solid var(--site-border, #e2e8f0); border-radius: 8px; background: var(--site-surface, #f8fafc); }
.board-feed-card h4 { margin: 0 0 6px; font-size: 0.95rem; }
.board-feed-card h4 a { color: inherit; text-decoration: none; }
.board-feed-card p { margin: 0 0 8px; font-size: 0.85rem; color: var(--site-muted, #64748b); line-height: 1.5; }
.board-feed-link-domain { margin: 0 0 6px; font-size: 0.82rem; color: var(--site-accent, #2563eb); }
.board-feed-gallery { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(var(--board-feed-cols, 3), minmax(0, 1fr)); grid-template-rows: repeat(var(--board-feed-rows, 1), minmax(0, 1fr)); gap: 10px; overflow: hidden; }
.board-feed-gallery-item { display: block; position: relative; border-radius: 8px; overflow: hidden; min-height: 0; height: 100%; background: var(--site-surface, #f1f5f9); text-decoration: none; color: inherit; }
.board-feed-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.board-feed-gallery-fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--site-muted, #94a3b8); font-size: 1.5rem; }
.board-feed-gallery-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 8px; font-size: 0.75rem; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,0.65)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-feed-more { flex-shrink: 0; margin-left: auto; color: var(--site-accent, #0d9488); text-decoration: none; font-size: 0.88rem; font-weight: 500; white-space: nowrap; }
.board-feed-more:hover { text-decoration: underline; }

/* widget-embed.css — member auth widget */
.member-auth-widget { width: 100%; padding: 15px; border: 1px solid var(--site-border, #e2e8f0); border-radius: 12px; background: var(--site-surface, #fff); box-sizing: border-box; }
.member-auth-widget-title { margin: 0 0 12px; font-size: 1.05rem; color: var(--site-text, #0f172a); }
.member-auth-widget-disabled { margin: 0; padding: 10px 12px; border-radius: 8px; background: #fff7ed; color: #9a3412; font-size: 0.88rem; line-height: 1.5; }
.member-auth-widget-hint { margin: 0; color: var(--site-muted, #64748b); font-size: 0.88rem; line-height: 1.5; }
.member-auth-widget-foot { margin: 10px 0 0; text-align: center; font-size: 0.84rem; }
.member-auth-widget-foot a { color: var(--site-accent, #2563eb); text-decoration: none; }
.member-auth-widget-foot a:hover { text-decoration: underline; }
.member-auth-toolbar { display: flex; flex-direction: column; gap: 10px; }
.member-auth-widget--horizontal .member-auth-toolbar--guest, .member-auth-widget--horizontal .member-auth-toolbar-actions { flex-direction: row; flex-wrap: wrap; }
.member-auth-toolbar--guest, .member-auth-toolbar-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.member-auth-greeting { margin: 0; font-size: 0.92rem; color: var(--site-text, #334155); }
.member-auth-form { display: flex; flex-direction: column; gap: 10px; }
.member-auth-field label { display: block; margin-bottom: 5px; font-size: 0.82rem; font-weight: 600; color: var(--site-text, #334155); }
.member-auth-field input { width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid var(--site-border, #cbd5e1); border-radius: 8px; font-family: var(--site-font-family, inherit); font-size: 0.92rem; background: #fff; color: var(--site-text, #0f172a); }
.member-auth-field input:focus { outline: none; border-color: var(--site-accent, #2563eb); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); }
.member-auth-field input:disabled { background: #f8fafc; color: #64748b; }
.member-auth-optional { font-weight: 400; color: var(--site-muted, #94a3b8); font-size: 0.78rem; }
.member-auth-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 14px; border-radius: 8px; font-size: 0.88rem; font-weight: 600; text-decoration: none; border: 1px solid var(--site-border, #e2e8f0); background: #f8fafc; color: var(--site-text, #334155); cursor: pointer; box-sizing: border-box; }
.member-auth-btn:hover { border-color: var(--site-accent, #2563eb); color: var(--site-accent, #2563eb); }
.member-auth-btn--primary { background: var(--site-accent, #2563eb); color: #fff; border-color: transparent; }
.member-auth-btn--primary:hover { filter: brightness(1.05); color: #fff; }
.member-auth-btn--danger { color: #b91c1c; border-color: #fecaca; background: #fef2f2; }
.member-auth-btn--danger:hover { background: #fee2e2; color: #991b1b; }
.member-auth-btn--block { width: 100%; }
.member-auth-canvas-preview { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 120px; padding: 15px; border-radius: 10px; background: linear-gradient(135deg, #eff6ff, #f8fafc); color: #334155; text-align: center; }
.member-auth-canvas-preview i { font-size: 1.6rem; color: #2563eb; }
.member-auth-canvas-preview strong { font-size: 0.95rem; }
.member-auth-canvas-preview span { font-size: 0.8rem; color: #64748b; }
@media (max-width: 640px) { .board-feed-header { align-items: flex-start; } .board-feed-list li { flex-direction: column; align-items: flex-start; gap: 4px; } .board-feed-cards { grid-template-columns: 1fr; } }

/* widget-embed.css — video embed */
.scp-player-host { width: 100%; min-height: 180px; }
.video-embed-widget .scp-player-host { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.video-embed-widget .scp-player-host .scp-player { flex: 1 1 auto; min-height: 0; }
.video-embed-widget { width: 100%; box-sizing: border-box; }
.video-embed-widget--portrait { display: flex; flex-direction: column; align-items: center; }
.video-embed-frame { position: relative; width: 100%; border-radius: 10px; overflow: hidden; background: #0f172a; box-sizing: border-box; }
.video-embed-frame--landscape { aspect-ratio: 16 / 9; max-width: none; }
.video-embed-frame--portrait { aspect-ratio: 9 / 16; width: 100%; max-width: min(100%, 420px); margin-left: auto; margin-right: auto; }
.video-embed-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-embed-frame--lazy .video-embed-iframe { display: none; }
.video-embed-frame--lazy.is-playing .video-embed-poster { display: none; }
.video-embed-frame--lazy.is-playing .video-embed-iframe { display: block; }
.video-embed-poster { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; cursor: pointer; background: #0f172a; display: block; }
.video-embed-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-embed-poster-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 3rem; color: rgba(255, 255, 255, 0.85); }
.video-embed-play-btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 999px; background: rgba(15, 23, 42, 0.72); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.35); pointer-events: none; }
.video-embed-player { display: block; width: 100%; max-height: 100%; border-radius: 10px; background: #0f172a; }
.video-embed-widget--landscape .video-embed-player { aspect-ratio: 16 / 9; }
.video-embed-widget--portrait .video-embed-player { aspect-ratio: 9 / 16; max-width: min(100%, 420px); margin-left: auto; margin-right: auto; }
.video-embed-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 180px; padding: 24px 16px; text-align: center; color: var(--site-muted, #64748b); background: var(--site-surface, #f8fafc); border-radius: 10px; }
.video-embed-placeholder i { font-size: 2rem; color: #2563eb; }
/* widget-embed.css — video block fills grid cell edge-to-edge */
.grid-widget.has-video { padding: 0; overflow: hidden; display: flex; flex-direction: column; box-sizing: border-box; min-height: 0; }
.grid-widget.has-video .video-embed-widget { flex: 1 1 auto; width: 100%; height: 100%; min-height: 0; display: flex; flex-direction: column; }
.grid-widget.has-video .video-embed-widget--portrait { align-items: stretch; }
.grid-widget.has-video .grid-widget-heading { flex-shrink: 0; margin: 0; padding: 12px 14px 8px; }
.grid-widget.has-video .video-embed-frame { flex: 1 1 auto; width: 100%; height: 100%; min-height: 0; border-radius: 0; aspect-ratio: unset; max-width: none; margin: 0; }
.grid-widget.has-video .video-embed-frame--landscape,
.grid-widget.has-video .video-embed-frame--portrait { aspect-ratio: unset; max-width: none; margin: 0; }
.grid-widget.has-video .video-embed-iframe,
.grid-widget.has-video .video-embed-poster,
.grid-widget.has-video .video-embed-poster img { width: 100%; height: 100%; }
.grid-widget.has-video .video-embed-player { width: 100%; height: 100%; max-height: none; border-radius: 0; aspect-ratio: unset; object-fit: cover; }
.grid-widget.has-video .video-embed-placeholder { flex: 1 1 auto; width: 100%; height: 100%; min-height: 0; border-radius: 0; }

/* widget-embed.css — map embed */
.map-embed-widget { width: 100%; }
.map-embed-widget--fill { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: inherit; box-sizing: border-box; }
.map-embed-title { flex-shrink: 0; margin: 0; padding: 12px 14px 8px; font-size: 1rem; }
.map-embed-body { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; overflow: hidden; display: flex; flex-direction: column; }
/* 2026-06-10: flex + absolute-only child collapses to 0 height on public pages — use flex fill */
.grid-widget.has-map .map-embed-body { flex: 1 1 auto; min-height: 100%; height: 100%; }
.grid-widget.has-map .map-embed-iframe, .grid-widget.has-map .kakao-map-canvas { position: relative; flex: 1 1 auto; width: 100%; height: 100%; min-height: 200px; border: 0; border-radius: 0; }
.map-embed-iframe, .kakao-map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; }
.kakao-map-canvas--error { display: flex; align-items: center; justify-content: center; padding: 15px; text-align: center; font-size: 0.88rem; line-height: 1.5; color: #b91c1c; background: #fef2f2; min-height: 200px; box-sizing: border-box; }
/* 2026-06-16: CustomOverlay marker bubble — fit-content, rounded, centered */
.kakao-map-canvas { --kakao-marker-bg: var(--site-surface, #fff); --kakao-marker-fg: var(--site-text, #0f172a); --kakao-marker-border: var(--site-border, #e2e8f0); --kakao-marker-radius: 10px; }
.kakao-map-marker-bubble { position: relative; display: inline-flex; flex-direction: column; align-items: center; width: max-content; max-width: min(240px, 80vw); box-sizing: border-box; pointer-events: none; }
.kakao-map-marker-label { display: inline-block; width: auto; max-width: 100%; padding: 8px 14px; border: 1px solid var(--kakao-marker-border); border-radius: var(--kakao-marker-radius); font-size: 0.82rem; font-weight: 700; line-height: 1.35; text-align: center; white-space: nowrap; box-sizing: border-box; color: var(--kakao-marker-fg); background: var(--kakao-marker-bg); box-shadow: 0 2px 10px rgba(15, 23, 42, 0.14); }
.kakao-map-canvas[data-kakao-theme="dark"] .kakao-map-marker-label { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); }
.kakao-map-marker-tail { display: block; width: 0; height: 0; margin: -1px auto 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 9px solid var(--kakao-marker-bg); }
.map-embed-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 100%; min-height: 200px; padding: 24px 16px; text-align: center; color: var(--site-muted, #64748b); background: var(--site-surface, #f8fafc); border: 1px dashed var(--site-border, #cbd5e1); box-sizing: border-box; }
.map-embed-placeholder i { font-size: 1.75rem; color: #2563eb; }
.map-embed-coords { margin: 0; font-size: 0.8rem; color: #94a3b8; }
.grid-widget.has-map { padding: 0; overflow: hidden; display: flex; flex-direction: column; box-sizing: border-box; }
.grid-widget.has-map .map-embed-widget--fill { flex: 1 1 auto; min-height: 0; }
.grid-widget.has-map .grid-widget-heading:not(.map-embed-title) { padding: 12px 14px 0; margin: 0; }

/* widget-embed.css — square corners option for non-hero blocks (2026-06-11) */
.page-grid .grid-widget.is-no-radius,
.responsive-grid .grid-widget.is-no-radius { border-radius: 0; }
.grid-widget.is-no-radius .grid-widget-image,
.grid-widget.is-no-radius .grid-widget-image-placeholder,
.grid-widget.is-no-radius .raw-code-iframe,
.grid-widget.is-no-radius .member-auth-widget,
.grid-widget.is-no-radius .video-embed-frame,
.grid-widget.is-no-radius .video-embed-player,
.grid-widget.is-no-radius .video-embed-placeholder,
.grid-widget.is-no-radius .board-feed-card,
.grid-widget.is-no-radius .board-feed-gallery-item,
.grid-widget.is-no-radius .board-feed-row,
.grid-widget.is-no-radius .board-blog-card,
.grid-widget.is-no-radius .board-gallery-card,
.grid-widget.is-no-radius .board-video-card,
.grid-widget.is-no-radius .board-card,
.grid-widget.is-no-radius .board-link-card,
.grid-widget.is-no-radius .board-faq-item,
.grid-widget.is-no-radius .map-embed-placeholder { border-radius: 0; }