/*
 * 위젯 디자인 (wg-*). 모든 레이아웃 스킨·테마 위에서 쓰이므로 색·모서리는 스킨 변수만 쓴다.
 * 디자인마다 배치가 다르다 (목록·카드·순위·티커 …). 색만 다른 디자인은 두지 않는다.
 */
.widget { --wg-accent: var(--accent, var(--primary)); }
/* 제목·구분선은 카드 틀 없이 (영역을 나누는 역할) */
.widget.widget--heading, .widget.widget--divider { background: none !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; padding-left: 0 !important; padding-right: 0 !important; }
.widget.widget--heading::before, .widget.widget--heading::after, .widget.widget--divider::before, .widget.widget--divider::after { content: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 공통 조각 */
.wg-meta { font-size: 12px; color: var(--muted); }
.wg-label { display: inline-block; font-size: 12px; font-weight: 700; color: var(--primary); }
.wg-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--primary); color: var(--on-primary, #fff); white-space: nowrap; vertical-align: middle; }
.wg-tag-soft { background: var(--accent-soft); color: var(--primary); }
.wg-noimg { display: grid; place-items: center; width: 100%; height: 100%; font-weight: 800; font-size: 20px; color: var(--primary); background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 18%, var(--surface)), color-mix(in srgb, var(--wg-accent) 18%, var(--surface))); }
.wg-cover, .wg-thumb { display: block; overflow: hidden; background: var(--surface-2); }
.wg-cover img, .wg-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wg-excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; color: var(--muted); }
.wg-rank { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-right: 8px; border-radius: 6px; font-size: 12px; font-weight: 800; background: var(--surface-2); color: var(--text); }
.wg-numbered li:nth-child(-n + 3) .wg-rank { background: var(--primary); color: var(--on-primary, #fff); }
.wg-avatar { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; font-weight: 800; font-size: 14px; background: var(--accent-soft); color: var(--primary); }
.wg-avatar-sm { width: 22px; height: 22px; font-size: 11px; margin-right: 6px; }
.wg-avatar-lg { width: 56px; height: 56px; font-size: 22px; }
.wg-avatar-guest { background: var(--surface-2); color: var(--muted); }
.wg-bar { display: block; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.wg-bar i { display: block; width: var(--w, 0%); height: 100%; border-radius: inherit; background: var(--primary); }
.wg-bar-thick { height: 12px; margin: 6px 0; }
.wg-num { font-variant-numeric: tabular-nums; }
.wg-pill-count { padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--surface-2); color: var(--muted); }
.wg-more { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--primary); }
.wg-date-box { display: inline-grid; justify-items: center; flex: none; min-width: 46px; padding: 4px 6px; border-radius: var(--radius-sm, 8px); background: var(--accent-soft); color: var(--primary); line-height: 1.15; font-size: 11px; }
.wg-date-box b { font-size: 18px; }
.wg-date-box-lg { min-width: 72px; padding: 8px; }
.wg-date-box-lg b { font-size: 30px; }

/* ---------- 글 목록 디자인 */
.wg-numbered, .wg-compact, .wg-thumbs, .wg-timeline, .wg-twocol, .wg-badges, .wg-bars, .wg-activity, .wg-files, .wg-bubbles, .wg-avatar-list, .wg-link-list, .wg-arrows, .wg-split, .wg-agenda, .wg-checklist, .wg-steps, .wg-history, .wg-kv-list, .wg-kv-icons, .wg-world, .wg-dday, .wg-price-list { list-style: none; margin: 0; padding: 0; }
.wg-numbered li { display: flex; align-items: center; padding: 6px 0; font-size: 14px; }
.wg-numbered a, .wg-numbered li > span:not([class]) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wg-numbered li > :last-child:not(:first-child):not(a) { margin-left: 8px; }
.wg-compact li, .wg-twocol li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 13.5px; }
.wg-compact a, .wg-twocol a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wg-compact time, .wg-twocol time { flex: none; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.wg-compact li + li { border-top: 1px dashed var(--line); }
.wg-twocol { columns: 2 180px; column-gap: 24px; }
.wg-twocol li { break-inside: avoid; border-bottom: 1px solid var(--line); }
.wg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.wg-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: transform .15s, box-shadow .15s; }
.wg-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: inherit; }
.wg-card .wg-cover { aspect-ratio: 16 / 10; }
.wg-card-body { display: grid; gap: 3px; padding: 10px 12px 12px; }
.wg-card-body strong { font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wg-thumbs li + li { margin-top: 10px; }
.wg-thumbs a { display: flex; gap: 10px; align-items: center; }
.wg-thumbs .wg-thumb { width: 56px; height: 56px; flex: none; border-radius: var(--radius-sm, 8px); }
.wg-thumbs-body { display: grid; min-width: 0; }
.wg-thumbs-body strong { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wg-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.wg-gallery-item, .wg-mosaic-item { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-sm, 8px); background: var(--surface-2); }
.wg-gallery-item img, .wg-mosaic-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.wg-gallery-item:hover img, .wg-mosaic-item:hover img { transform: scale(1.06); }
.wg-gallery-title { position: absolute; inset: auto 0 0; padding: 18px 8px 6px; font-size: 11px; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .7)); opacity: 0; transition: opacity .2s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wg-gallery-item:hover .wg-gallery-title, .wg-mosaic-item:hover .wg-gallery-title { opacity: 1; }
.wg-webzine { display: grid; gap: 12px; }
.wg-webzine-item { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; color: inherit; }
.wg-webzine-item .wg-thumb { aspect-ratio: 4 / 3; border-radius: var(--radius-sm, 8px); }
.wg-webzine-body { display: grid; gap: 2px; align-content: start; }
.wg-webzine-body strong { font-size: 15px; line-height: 1.35; }
.wg-webzine-item:hover strong { color: var(--primary); }
.wg-ticker { display: flex; align-items: center; gap: 10px; height: 34px; overflow: hidden; }
.wg-ticker-tag { flex: none; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 800; background: var(--primary); color: var(--on-primary, #fff); }
.wg-ticker ul { position: relative; flex: 1; min-width: 0; height: 34px; margin: 0; padding: 0; list-style: none; }
.wg-ticker li { position: absolute; inset: 0; display: flex; align-items: center; opacity: 0; transform: translateY(100%); transition: transform .45s, opacity .45s; }
.wg-ticker li:first-child, .wg-ticker li.is-active { opacity: 1; transform: none; }
.wg-ticker[data-wg-ready] li:first-child:not(.is-active) { opacity: 0; transform: translateY(-100%); }
.wg-ticker li.is-leaving { opacity: 0; transform: translateY(-100%); }
.wg-ticker a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.wg-slider { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 46%); gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
.wg-slide { display: grid; gap: 6px; align-content: start; scroll-snap-align: start; color: inherit; }
.wg-slide .wg-cover { aspect-ratio: 4 / 3; border-radius: var(--radius); }
.wg-slide strong { font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wg-timeline { position: relative; padding-left: 16px; border-left: 2px solid var(--line); }
.wg-timeline li { position: relative; display: grid; gap: 1px; padding: 0 0 12px; font-size: 14px; }
.wg-timeline li::before { content: ""; position: absolute; left: -22px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px var(--surface); }
.wg-timeline li.wg-kind-comment::before { background: var(--surface); border: 2px solid var(--primary); }
.wg-timeline time { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.wg-magazine { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; }
.wg-magazine-lead { display: grid; gap: 4px; align-content: start; color: inherit; }
.wg-magazine-lead .wg-cover { aspect-ratio: 16 / 9; border-radius: var(--radius); margin-bottom: 4px; }
.wg-magazine-lead strong { font-size: 17px; line-height: 1.35; }
.wg-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.wg-table th, .wg-table td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.wg-table thead th { font-size: 12px; color: var(--muted); font-weight: 600; }
.wg-table tbody th { font-weight: 700; white-space: nowrap; }
.wg-table tr:last-child td, .wg-table tr:last-child th { border-bottom: 0; }
.wg-table-board { width: 90px; font-size: 12px; font-weight: 700; color: var(--primary); }
.wg-table-author { width: 80px; color: var(--muted); }
.wg-table-date { width: 48px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.wg-table tr.is-today, .wg-table tr.is-pick { background: var(--accent-soft); }
.wg-badges li { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 14px; }
.wg-badges .wg-tag { flex: none; background: var(--accent-soft); color: var(--primary); }
.wg-badges a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wg-podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-items: end; margin-bottom: 10px; }
.wg-podium-step { position: relative; display: grid; justify-items: center; gap: 4px; padding: 14px 10px 12px; text-align: center; border-radius: var(--radius) var(--radius) 0 0; background: var(--surface-2); color: inherit; }
.wg-podium-step strong { font-size: 13px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wg-podium-1 { min-height: 150px; background: var(--accent-soft); }
.wg-podium-2 { min-height: 120px; }
.wg-podium-3 { min-height: 100px; }
.wg-podium-rank { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-weight: 900; background: var(--text); color: var(--surface); }
.wg-podium-1 .wg-podium-rank { background: var(--primary); color: var(--on-primary, #fff); }
.wg-bars li { display: grid; gap: 4px; padding: 6px 0; font-size: 13.5px; }
.wg-bars li > a, .wg-bars li > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wg-bars b { margin-right: 6px; color: var(--primary); }
.wg-bars-plain li { grid-template-columns: minmax(0, 1fr) 40% auto; align-items: center; gap: 10px; }
.wg-notice-banner { display: grid; gap: 6px; }
.wg-notice-banner a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm, 8px); background: var(--accent-soft); color: var(--text); font-size: 14px; }
.wg-notice-banner strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.wg-notice-banner time { font-size: 12px; color: var(--muted); }
.wg-mosaic { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 104px; gap: 6px; }
.wg-mosaic .wg-mosaic-item { aspect-ratio: auto; height: 100%; }
.wg-mosaic-item:first-child { grid-column: span 2; grid-row: span 2; }
.wg-polaroid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 16px; padding: 6px; }
.wg-polaroid-item { display: grid; gap: 6px; padding: 8px 8px 10px; background: #fff; color: #1f2937; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .3); transform: rotate(-1.5deg); font-size: 12px; text-align: center; transition: transform .2s; }
.wg-polaroid-item:nth-child(even) { transform: rotate(1.5deg); }
.wg-polaroid-item:hover { transform: rotate(0) scale(1.03); color: #1f2937; }
.wg-polaroid-item .wg-cover { aspect-ratio: 1; }
.wg-polaroid-item > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wg-hero { display: grid; gap: 6px; align-content: end; min-height: 200px; padding: 20px; border-radius: var(--radius-lg); color: var(--on-primary, #fff); background: linear-gradient(135deg, var(--primary), var(--wg-accent)); }
.wg-hero.has-cover { color: #fff; background: linear-gradient(transparent 20%, rgba(0, 0, 0, .78)), var(--cover) center / cover; }
.wg-hero:hover { color: inherit; }
.wg-hero .wg-label, .wg-hero .wg-meta, .wg-hero .wg-excerpt { color: inherit; opacity: .88; }
.wg-hero strong { font-size: 21px; line-height: 1.25; letter-spacing: -0.03em; }
.wg-post-quote { margin: 0; }
.wg-post-quote blockquote { margin: 0 0 8px; font-size: 16px; line-height: 1.6; font-family: var(--head-font, inherit); }
.wg-post-quote blockquote::before { content: "“"; display: block; font-size: 40px; line-height: .6; color: var(--primary); }
.wg-post-quote figcaption { font-size: 13px; color: var(--muted); }
.wg-post-minimal { display: grid; gap: 4px; padding: 4px 0; color: inherit; }
.wg-post-minimal strong { font-size: 18px; line-height: 1.35; letter-spacing: -0.02em; }
.wg-post-minimal:hover strong { text-decoration: underline; text-underline-offset: 4px; }
.wg-count-big { display: flex; align-items: baseline; gap: 6px; margin: 0 0 8px; }
.wg-count-big b { font-size: 34px; font-weight: 900; line-height: 1; color: var(--primary); letter-spacing: -0.04em; }
.wg-count-big span { color: var(--muted); font-size: 13px; }
.wg-feature { display: grid; gap: 6px; }
.wg-feature-main { display: grid; align-content: end; gap: 2px; min-height: 220px; padding: 16px; border-radius: var(--radius); color: var(--on-primary, #fff); background: linear-gradient(135deg, var(--primary), var(--wg-accent)); }
.wg-feature-main.has-cover { color: #fff; background: linear-gradient(transparent 40%, rgba(0, 0, 0, .75)), var(--cover) center / cover; }
.wg-feature-main:hover { color: inherit; }
.wg-feature-main strong { font-size: 18px; }
.wg-feature-main .wg-meta { color: inherit; opacity: .85; }
.wg-feature-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.wg-feature-row a { aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-sm, 8px); background: var(--surface-2); }
.wg-feature-row img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 탭·펼침 */
.wg-tab-buttons { display: flex; gap: 4px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; margin-bottom: 10px; }
.wg-tab-buttons::-webkit-scrollbar { display: none; }
.wg-tab-buttons button { flex: none; padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm, 8px); background: var(--surface); color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.wg-tab-buttons button[aria-selected="true"] { background: var(--text); border-color: var(--text); color: var(--surface); }
.wg-tabs-underline .wg-tab-buttons { gap: 0; border-bottom: 1px solid var(--line); }
.wg-tabs-underline .wg-tab-buttons button { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; margin-bottom: -1px; }
.wg-tabs-underline .wg-tab-buttons button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--primary); background: none; }
.wg-tabs-pills .wg-tab-buttons button { border-radius: 999px; border-color: transparent; background: var(--surface-2); }
.wg-tabs-pills .wg-tab-buttons button[aria-selected="true"] { background: var(--primary); color: var(--on-primary, #fff); }
.wg-tab-panel p { margin: 0; font-size: 14px; }
.wg-accordion details { border-bottom: 1px solid var(--line); }
.wg-accordion summary { display: flex; justify-content: space-between; gap: 8px; padding: 10px 0; font-weight: 700; font-size: 14px; cursor: pointer; list-style: none; }
.wg-accordion summary::-webkit-details-marker { display: none; }
.wg-accordion summary::after { content: "+"; color: var(--muted); }
.wg-accordion details[open] summary::after { content: "−"; }
.wg-accordion details > :not(summary) { margin: 0 0 12px; }
.wg-faq summary b { color: var(--primary); margin-right: 4px; }
.wg-faq details p { color: var(--muted); font-size: 14px; }

/* ---------- 활동·파일·댓글 */
.wg-activity li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; padding: 7px 0; font-size: 14px; border-bottom: 1px dashed var(--line); }
.wg-activity a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wg-activity .wg-meta { grid-column: 2; }
.wg-files li { display: flex; gap: 10px; align-items: center; padding: 6px 0; }
.wg-files a { display: grid; min-width: 0; font-size: 14px; }
.wg-file-ext { display: inline-grid; place-items: center; flex: none; width: 38px; height: 44px; border-radius: 6px 12px 6px 6px; font-size: 10px; font-weight: 800; background: var(--accent-soft); color: var(--primary); }
.wg-file-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.wg-file-card { display: grid; justify-items: start; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); font-size: 13px; }
.wg-file-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.wg-bubbles li + li { margin-top: 10px; }
.wg-bubble { position: relative; display: block; padding: 9px 12px; margin-bottom: 3px; border-radius: 4px 14px 14px 14px; background: var(--surface-2); color: var(--text); font-size: 13.5px; }
.wg-avatar-list li { display: flex; gap: 8px; align-items: center; padding: 6px 0; font-size: 14px; }
.wg-avatar-list li > span:last-child { min-width: 0; }
.wg-avatar-list a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wg-quote-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.wg-quote-card { display: grid; gap: 8px; margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: inherit; }
.wg-quote-text { margin: 0; font-size: 14px; line-height: 1.55; }
.wg-quote-text::before { content: "“"; color: var(--primary); font-weight: 900; margin-right: 2px; }
.wg-quote-card .wg-meta { display: flex; align-items: center; }

/* ---------- 게시판·링크 */
.wg-link-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.wg-link-list li:last-child { border-bottom: 0; }
.wg-link-list li.is-today { font-weight: 700; }
.wg-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.wg-tile { display: grid; gap: 2px; padding: 12px; border-radius: var(--radius); background: var(--surface-2); color: inherit; }
.wg-tile:hover { background: var(--accent-soft); color: var(--primary); }
.wg-tile strong { font-size: 14px; }
.wg-icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 10px 6px; text-align: center; font-size: 12px; }
.wg-icon-grid a { display: grid; justify-items: center; gap: 5px; }
.wg-icon-box { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; font-weight: 800; font-size: 17px; background: var(--accent-soft); color: var(--primary); transition: transform .15s; }
.wg-icon-grid a:hover .wg-icon-box { transform: translateY(-3px); }
.wg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wg-chips a { display: inline-flex; gap: 4px; align-items: center; padding: 5px 11px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; background: var(--surface); }
.wg-chips a:hover { border-color: var(--primary); color: var(--primary); }
.wg-chips b { font-size: 11px; color: var(--muted); }
.wg-chips-round a { border-radius: 999px; background: var(--surface-2); border-color: transparent; }
.wg-board-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.wg-board-card { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); }
.wg-board-card-head { display: flex; justify-content: space-between; }
.wg-board-card .wg-meta { margin: 0; }
.wg-board-card-latest { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.wg-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.wg-buttons-full { display: grid; grid-template-columns: 1fr 1fr; }
.wg-buttons-full .btn { justify-content: center; text-align: center; }
.wg-arrows li + li { border-top: 1px solid var(--line); }
.wg-arrows a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 2px; font-weight: 600; font-size: 14px; }
.wg-arrows small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
.wg-arrows a:hover span:last-child { transform: translateX(3px); color: var(--primary); }
.wg-arrows span:last-child { transition: transform .15s; }
.wg-split { columns: 2; column-gap: 16px; font-size: 14px; }
.wg-split li { padding: 4px 0; break-inside: avoid; }
.wg-split li::before { content: "·"; margin-right: 6px; color: var(--primary); font-weight: 900; }
.wg-round-icons { display: flex; flex-wrap: wrap; gap: 8px; }
.wg-round-icons a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-weight: 800; background: var(--text); color: var(--surface); transition: transform .15s; }
.wg-round-icons a:hover { transform: translateY(-3px); color: var(--surface); background: var(--primary); }
.wg-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.wg-pills a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 4px; border-radius: 999px; background: var(--surface-2); font-size: 13px; font-weight: 600; }
.wg-pill-dot { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 11px; background: var(--primary); color: var(--on-primary, #fff); }
.wg-bigtiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.wg-bigtiles a { position: relative; display: grid; gap: 14px; padding: 14px; border-radius: var(--radius); background: var(--surface-2); }
.wg-bigtiles a > span:last-child { position: absolute; top: 10px; right: 12px; color: var(--muted); }
.wg-bigtile-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-weight: 800; background: var(--text); color: var(--surface); }
.wg-link-cards { display: grid; gap: 8px; }
.wg-link-card { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-left: 4px solid var(--primary); border-radius: var(--radius-sm, 8px); }

/* ---------- 태그 */
.wg-hashtags { margin: 0; line-height: 1.9; font-size: 14px; }
.wg-hashtags a { color: var(--primary); font-weight: 600; margin-right: 4px; }
.wg-search-tags { margin-top: 8px; font-size: 13px; }
.wg-search-tags .wg-meta { margin-right: 6px; }

/* ---------- 달력 */
.wg-cal-title { margin: 0 0 8px; font-weight: 800; font-size: 14px; }
.wg-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; font-size: 12px; }
.wg-cal-head { color: var(--muted); font-size: 11px; padding-bottom: 2px; }
.wg-cal-day { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 8px; font-variant-numeric: tabular-nums; }
.wg-cal-day.has-posts { background: var(--accent-soft); color: var(--primary); font-weight: 800; }
.wg-cal-day.has-posts i { position: absolute; right: 2px; top: 1px; font-style: normal; font-size: 8px; }
.wg-cal-day.is-today { box-shadow: inset 0 0 0 2px var(--primary); }
.wg-cal-mini .wg-cal-grid { gap: 4px; }
.wg-cal-dot { display: block; aspect-ratio: 1; border-radius: 4px; background: var(--surface-2); }
.wg-cal-dot.has-posts { background: var(--primary); }
.wg-cal-dot.is-today { outline: 2px solid var(--text); outline-offset: 1px; }
.wg-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.wg-week-day { display: grid; gap: 1px; padding: 6px 0; border-radius: 10px; font-size: 11px; color: var(--muted); }
.wg-week-day b { font-size: 16px; color: var(--text); }
.wg-week-day i { font-style: normal; font-size: 10px; }
.wg-week-day.has-posts { background: var(--accent-soft); }
.wg-week-day.is-today { background: var(--primary); color: var(--on-primary, #fff); }
.wg-week-day.is-today b { color: inherit; }
.wg-agenda li { display: flex; gap: 10px; align-items: center; padding: 6px 0; }
.wg-agenda li > span:last-child { display: grid; min-width: 0; font-size: 13.5px; }
.wg-agenda-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 회원·접속 */
.wg-avatars { display: flex; flex-wrap: wrap; gap: 10px; }
.wg-avatar-item { display: grid; justify-items: center; gap: 3px; width: 52px; font-size: 11px; text-align: center; }
.wg-avatar-item > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wg-avatars-stack { gap: 0; }
.wg-avatars-stack .wg-avatar { margin-right: -8px; box-shadow: 0 0 0 2px var(--surface); }
.wg-member-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.wg-member-card { display: grid; justify-items: center; gap: 4px; padding: 14px 8px; border: 1px solid var(--line); border-radius: var(--radius); text-align: center; font-size: 13px; }
.wg-online-badge { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 14px; }
.wg-online-badge b { font-size: 20px; color: var(--primary); }
.wg-live { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #1baf7a; box-shadow: 0 0 0 3px color-mix(in srgb, #1baf7a 25%, transparent); animation: wg-pulse 2s infinite; }
@keyframes wg-pulse { 50% { box-shadow: 0 0 0 6px transparent; } }

/* ---------- 숫자 */
.wg-stat-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.wg-stat { display: grid; gap: 2px; padding: 12px; border-radius: var(--radius); background: var(--surface-2); }
.wg-stat b { font-size: 22px; font-weight: 900; line-height: 1.1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.wg-stat span { font-size: 12px; color: var(--muted); }
.wg-stat-big p { display: flex; align-items: baseline; gap: 8px; margin: 0; padding: 4px 0; }
.wg-stat-big b { font-size: 34px; font-weight: 900; letter-spacing: -0.05em; color: var(--primary); font-variant-numeric: tabular-nums; }
.wg-stat-big span { color: var(--muted); }
.wg-stat-inline { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: 13.5px; color: var(--muted); }
.wg-stat-inline b { color: var(--text); }
.wg-donut-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.wg-donut { display: grid; place-items: center; flex: none; width: 110px; height: 110px; border-radius: 50%; }
.wg-donut span { display: grid; place-items: center; width: 66px; height: 66px; border-radius: 50%; background: var(--surface); font-size: 11px; color: var(--muted); line-height: 1.1; }
.wg-donut b { font-size: 16px; color: var(--text); }
.wg-legend { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.wg-legend li { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.wg-legend i { width: 10px; height: 10px; border-radius: 3px; }

/* ---------- 투표 */
.wg-poll-q { margin: 0 0 10px; font-weight: 700; }
.wg-poll-form { display: grid; gap: 6px; justify-items: start; }
.wg-poll-option { display: flex; gap: 8px; align-items: center; font-weight: 400; font-size: 14px; }
.wg-poll-buttons { display: grid; gap: 6px; }
.wg-poll-buttons .btn { justify-content: center; }
.wg-poll-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.wg-poll-card { display: grid; gap: 6px; padding: 12px; text-align: left; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
.wg-poll-card:hover:not(:disabled) { border-color: var(--primary); }
.wg-poll-card:disabled { cursor: default; }

/* ---------- 검색·로그인·등급·소개 */
.wg-search-pill { display: flex; align-items: center; padding: 4px 4px 4px 16px; border: 2px solid var(--primary); border-radius: 999px; background: var(--input-bg, var(--surface)); }
.wg-search-pill input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; color: var(--text); outline: none; }
.wg-search-pill button { display: grid; place-items: center; min-width: 36px; height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--primary); color: var(--on-primary, #fff); font: inherit; font-weight: 700; cursor: pointer; }
.wg-search-underline input { width: 100%; padding: 8px 2px; border: 0; border-bottom: 2px solid var(--text); background: none; font: inherit; font-size: 16px; color: var(--text); outline: none; }
.wg-search-underline input:focus { border-bottom-color: var(--primary); }
.wg-search-icon { display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: var(--radius); background: var(--surface-2); color: var(--muted); }
.wg-search-icon input { flex: 1; min-width: 0; height: 40px; border: 0; background: none; font: inherit; color: var(--text); outline: none; }
.wg-search-hero { padding: 14px 0; text-align: center; }
.wg-search-hero-title { margin: 0 0 12px; font-size: 22px; font-weight: 800; letter-spacing: -0.03em; }
.wg-login-line { margin: 0; font-size: 14px; }
.wg-login-compact { display: grid; grid-template-columns: 1fr 1fr auto; gap: 4px; }
.wg-welcome { display: grid; gap: 6px; padding: 14px; border-radius: var(--radius); background: var(--accent-soft); }
.wg-welcome-hi { margin: 0; font-size: 17px; line-height: 1.35; }
.wg-profile-mini { display: grid; justify-items: center; gap: 4px; text-align: center; }
.wg-profile-mini .widget-login { width: 100%; }
.wg-level { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: center; }
.wg-level > div { display: grid; }
.wg-level .wg-bar { grid-column: 1 / -1; }
.wg-level-num { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; font-weight: 900; background: var(--primary); color: var(--on-primary, #fff); }
.wg-level-inline { margin: 0; font-size: 14px; }
.wg-intro { display: grid; gap: 6px; justify-items: start; }
.wg-intro strong { font-size: 17px; }
.wg-intro p, .wg-intro-split p, .wg-intro-banner p { margin: 0; font-size: 14px; color: var(--muted); }
.wg-intro-center { justify-items: center; text-align: center; }
.wg-intro-logo { max-width: 120px; max-height: 56px; }
.wg-intro-mark { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; font-weight: 900; font-size: 20px; background: var(--primary); color: var(--on-primary, #fff); }
.wg-intro-banner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 20px; border-radius: var(--radius-lg); background: var(--accent-soft); }
.wg-intro-banner strong { font-size: 19px; }
.wg-intro-minimal { margin: 0; font-size: 14px; }
.wg-intro-minimal a { color: var(--primary); font-weight: 600; margin-left: 6px; }
.wg-intro-split { display: flex; gap: 14px; align-items: flex-start; }
.wg-intro-split > div { display: grid; gap: 4px; justify-items: start; }
.wg-form-title { display: block; margin-bottom: 8px; font-size: 16px; }
.wg-form-card { padding: 14px; border-radius: var(--radius); background: var(--surface-2); }
.wg-form-toggle > summary { list-style: none; display: inline-flex; cursor: pointer; }
.wg-form-toggle > summary::-webkit-details-marker { display: none; }
.wg-form-toggle[open] > summary { margin-bottom: 12px; }

/* ---------- 글·안내 */
.wg-callout { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--radius); background: var(--accent-soft); font-size: 14px; }
.wg-note { padding: 16px; background: #fff7c2; color: #3b3220; font-size: 14px; line-height: 1.7; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .35); transform: rotate(-1deg); border-radius: 2px; }
.wg-text-quote { margin: 0; padding-left: 14px; border-left: 3px solid var(--primary); font-size: 14px; color: var(--text); }
.wg-boxed { padding: 12px 14px; border: 1px dashed var(--line); border-radius: var(--radius); }
.wg-heading { display: grid; gap: 2px; }
.wg-heading strong { font-size: 20px; letter-spacing: -0.03em; font-family: var(--head-font, inherit); }
.wg-heading span { font-size: 13px; color: var(--muted); }
.wg-heading-underline strong { display: inline-block; justify-self: start; padding-bottom: 4px; border-bottom: 3px solid var(--primary); }
.wg-heading-eyebrow span { font-size: 11px; font-weight: 800; letter-spacing: .14em; color: var(--primary); }
.wg-divider { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
.wg-divider-dots { text-align: center; letter-spacing: .6em; color: var(--muted); }
.wg-divider-space { height: 24px; }
.wg-quote-classic, .wg-quote-bigmark, .wg-quote-card-single, .wg-quote-bubble { margin: 0; }
.wg-quote-classic blockquote { margin: 0 0 6px; font-size: 16px; font-style: italic; font-family: var(--head-font, inherit); }
.wg-quote-classic figcaption, .wg-quote-bigmark figcaption { font-size: 13px; color: var(--muted); }
.wg-quote-bigmark > span { display: block; font-size: 64px; line-height: .7; font-weight: 900; color: var(--primary); font-family: Georgia, serif; }
.wg-quote-bigmark blockquote { margin: 6px 0; font-size: 17px; font-weight: 700; line-height: 1.5; letter-spacing: -0.02em; }
.wg-quote-card-single { padding: 18px; border-radius: var(--radius-lg); background: var(--primary); color: var(--on-primary, #fff); }
.wg-quote-card-single blockquote { margin: 0 0 10px; font-size: 16px; line-height: 1.6; }
.wg-quote-card-single figcaption { font-size: 13px; opacity: .85; }
.wg-quote-minimal { margin: 0; font-size: 15px; }
.wg-quote-minimal span { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
.wg-quote-bubble blockquote { margin: 0 0 6px; }
.wg-quote-bubble figcaption { display: flex; align-items: center; font-size: 12px; color: var(--muted); }
.wg-faq-list { margin: 0; font-size: 14px; }
.wg-faq-list dt { font-weight: 700; margin-top: 8px; }
.wg-faq-list dd { margin: 2px 0 0; color: var(--muted); }
.wg-faq-cards { display: grid; gap: 8px; }
.wg-faq-card { padding: 12px 14px; border-radius: var(--radius); background: var(--surface-2); font-size: 14px; }
.wg-faq-card p { margin: 4px 0 0; color: var(--muted); }
.wg-checklist li { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 14px; }
.wg-check { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border: 2px solid var(--line); border-radius: 6px; font-size: 12px; font-weight: 900; }
.is-done > .wg-check { background: var(--primary); border-color: var(--primary); color: var(--on-primary, #fff); }
.wg-checklist .is-done { color: var(--muted); text-decoration: line-through; }
.wg-check-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.wg-check-card { display: flex; gap: 8px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); font-size: 13px; }
.wg-check-card.is-done { background: var(--accent-soft); border-color: transparent; }
.wg-progress-head { display: flex; justify-content: space-between; align-items: baseline; margin: 0; font-size: 14px; }
.wg-steps li { display: flex; gap: 12px; padding-bottom: 12px; position: relative; }
.wg-steps li:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px; background: var(--line); }
.wg-steps p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.wg-step-num { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; font-weight: 800; font-size: 13px; background: var(--primary); color: var(--on-primary, #fff); }
.wg-steps-h { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; list-style: none; margin: 0; padding: 0; text-align: center; }
.wg-steps-h li { display: grid; justify-items: center; gap: 4px; position: relative; font-size: 14px; }
.wg-steps-h li:not(:last-child)::after { content: ""; position: absolute; top: 14px; left: calc(50% + 20px); right: calc(-50% + 20px); height: 2px; background: var(--line); }
.wg-steps-h p { margin: 0; font-size: 12px; color: var(--muted); }
.wg-step-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.wg-step-card { display: grid; gap: 4px; padding: 14px; border-radius: var(--radius); background: var(--surface-2); }
.wg-step-card > span { font-size: 22px; font-weight: 900; color: var(--primary); letter-spacing: -0.04em; }
.wg-step-card p { margin: 0; font-size: 13px; color: var(--muted); }
.wg-history { border-left: 2px solid var(--primary); padding-left: 14px; }
.wg-history li { display: grid; gap: 1px; padding-bottom: 10px; font-size: 14px; }
.wg-history b { color: var(--primary); font-size: 15px; }
.wg-kv-list li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.wg-kv-list li:last-child { border-bottom: 0; }
.wg-kv-list li.is-today { font-weight: 700; color: var(--primary); }
.wg-kv-label { color: var(--muted); font-size: 13px; }

/* ---------- 알림·배너 */
.wg-announce { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.wg-announce p { flex: 1; min-width: 150px; margin: 0; font-size: 14px; font-weight: 600; }
.wg-announce-link { font-size: 13px; font-weight: 700; color: var(--primary); white-space: nowrap; }
.wg-announce-strip { padding: 10px 14px; border-radius: var(--radius-sm, 8px); background: var(--primary); color: var(--on-primary, #fff); }
.wg-announce-strip .wg-announce-link { color: inherit; text-decoration: underline; }
.wg-announce-card { padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); }
.wg-announce-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--accent-soft); font-size: 18px; }
.wg-announce-pill { margin: 0; }
.wg-announce-pill a, .wg-announce-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 5px; border-radius: 999px; background: var(--surface-2); font-size: 13px; font-weight: 600; }
.wg-marquee { overflow: hidden; padding: 8px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.wg-marquee-track { display: inline-flex; gap: 48px; white-space: nowrap; font-weight: 700; animation: wg-marquee 22s linear infinite; }
.wg-marquee:hover .wg-marquee-track { animation-play-state: paused; }
@keyframes wg-marquee { to { transform: translateX(-50%); } }
.wg-announce-floating { padding: 16px 14px 12px; border: 2px solid var(--primary); border-radius: var(--radius); position: relative; margin-top: 10px; }
.wg-announce-label { position: absolute; top: -11px; left: 12px; padding: 1px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; background: var(--primary); color: var(--on-primary, #fff); }
.wg-announce-split { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--radius); background: var(--surface-2); }
.wg-announce-split p { margin: 0; font-weight: 600; }
.wg-announce-big { display: grid; justify-items: center; gap: 6px; padding: 8px 0; text-align: center; }
.wg-announce-big > span { font-size: 40px; line-height: 1; }
.wg-announce-big p { margin: 0; font-weight: 700; }
.wg-banner { display: block; position: relative; overflow: hidden; color: inherit; }
.wg-banner img { display: block; width: 100%; height: auto; }
.wg-noimg-banner { aspect-ratio: 16 / 9; font-size: 34px; }
.wg-banner-caption { display: block; margin-top: 6px; font-size: 13px; font-weight: 600; }
.wg-banner-rounded img, .wg-banner-rounded .wg-noimg { border-radius: var(--radius-lg); }
.wg-banner-overlay { border-radius: var(--radius); }
.wg-banner-over { position: absolute; inset: auto 0 0; padding: 28px 14px 12px; color: #fff; font-weight: 700; background: linear-gradient(transparent, rgba(0, 0, 0, .72)); }
.wg-banner-framed { padding: 8px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
.wg-banner-framed .wg-banner-caption { text-align: center; }
.wg-banner-circle { display: grid; justify-items: center; text-align: center; }
.wg-banner-circle img, .wg-banner-circle .wg-noimg { width: 160px; height: 160px; object-fit: cover; border-radius: 50%; aspect-ratio: 1; }
.wg-banner-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: center; }
.wg-banner-side img, .wg-banner-side .wg-noimg { border-radius: var(--radius); }
.wg-banner-side-text { display: grid; gap: 4px; }
.wg-banner-side-text strong { font-size: 18px; }
.wg-tone-0 { --tone: var(--primary); } .wg-tone-1 { --tone: var(--wg-accent); } .wg-tone-2 { --tone: color-mix(in srgb, var(--primary) 60%, var(--text)); } .wg-tone-3 { --tone: color-mix(in srgb, var(--wg-accent) 60%, var(--text)); }
.wg-banner-slider { display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
.wg-banner-slide, .wg-fade-slide { position: relative; display: grid; align-content: end; min-height: 150px; overflow: hidden; border-radius: var(--radius-lg); scroll-snap-align: start; color: #fff; background: var(--tone); }
.wg-banner-slide img, .wg-fade-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wg-slide-caption { position: relative; padding: 30px 14px 12px; font-weight: 700; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); }
.wg-banner-slide:hover, .wg-fade-slide:hover { color: #fff; }
.wg-fade { position: relative; min-height: 170px; }
.wg-fade-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; }
.wg-fade-slide.is-active { opacity: 1; z-index: 1; }
.wg-fade-dots { position: absolute; right: 12px; top: 10px; z-index: 2; display: flex; gap: 4px; }
.wg-fade-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .5); }
.wg-fade-dots i.is-active { background: #fff; }
.wg-banner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.wg-banner-grid .wg-banner-slide { min-height: 110px; }
.wg-cta { display: grid; gap: 8px; }
.wg-cta strong { font-size: 18px; letter-spacing: -0.02em; }
.wg-cta p { margin: 0; font-size: 14px; color: var(--muted); }
.wg-cta .btn { justify-self: start; }
.wg-cta-card { padding: 18px; border-radius: var(--radius-lg); background: var(--accent-soft); }
.wg-cta-banner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 20px 22px; border-radius: var(--radius-lg); color: var(--on-primary, #fff); background: linear-gradient(135deg, var(--primary), var(--wg-accent)); }
.wg-cta-banner p { color: inherit; opacity: .9; }
.wg-cta-banner .btn-primary { background: var(--surface); border-color: var(--surface); color: var(--text); }
.wg-cta-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; gap: 16px; }
.wg-cta-split strong { font-size: 22px; line-height: 1.2; }
.wg-cta-split > div { display: grid; gap: 8px; }
.wg-cta-minimal { margin: 0; font-size: 14px; }
.wg-cta-minimal a { font-weight: 700; color: var(--primary); }
.wg-event { display: grid; gap: 6px; justify-items: start; padding: 16px; border-radius: var(--radius); border: 1px solid var(--line); }
.wg-event strong { font-size: 17px; }
.wg-event p { margin: 0; font-size: 14px; }
.wg-ticket { display: grid; grid-template-columns: minmax(0, 1fr) 96px; border-radius: var(--radius); overflow: hidden; background: var(--primary); color: var(--on-primary, #fff); }
.wg-ticket-main { display: grid; gap: 4px; padding: 14px; }
.wg-ticket-main .wg-label, .wg-ticket-main .wg-meta { color: inherit; opacity: .85; }
.wg-ticket-main strong { font-size: 17px; }
.wg-ticket-stub { display: grid; justify-items: center; align-content: center; gap: 2px; padding: 10px; border-left: 2px dashed color-mix(in srgb, var(--on-primary, #fff) 50%, transparent); font-size: 12px; }
.wg-ticket-stub b { font-size: 20px; }
.wg-ticket-stub a { color: inherit; font-weight: 700; }
.wg-event-cal { display: flex; gap: 14px; align-items: center; }
.wg-event-cal > div { display: grid; gap: 4px; justify-items: start; }
.wg-event-cal p { margin: 0; }
.wg-event-banner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; border-radius: var(--radius-lg); background: var(--surface-2); }
.wg-event-banner > div { display: grid; gap: 3px; }
.wg-event-banner strong { font-size: 18px; }
.wg-event-title { display: block; margin-bottom: 6px; font-size: 16px; }
.wg-coupon { display: grid; grid-template-columns: minmax(0, 1fr) auto; border: 2px dashed var(--primary); border-radius: var(--radius); }
.wg-coupon-main { display: grid; gap: 2px; padding: 12px 14px; }
.wg-coupon-code { display: grid; justify-items: center; gap: 4px; padding: 10px 14px; border-left: 2px dashed var(--primary); }
.wg-coupon code, .wg-coupon-card code, .wg-coupon-minimal code { padding: 3px 8px; border-radius: 6px; font-weight: 800; letter-spacing: .06em; background: var(--surface-2); color: var(--text); }
.wg-coupon-card { display: grid; gap: 6px; justify-items: start; padding: 16px; border-radius: var(--radius); background: var(--surface-2); position: relative; }
.wg-coupon-badge { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-weight: 900; background: var(--primary); color: var(--on-primary, #fff); }
.wg-code-row { display: flex; gap: 6px; align-items: center; }
.wg-coupon-minimal { margin: 0; font-size: 14px; }
.wg-countdown-big { display: grid; justify-items: center; gap: 2px; text-align: center; }
.wg-countdown-big b { font-size: 48px; font-weight: 900; line-height: 1; letter-spacing: -0.05em; color: var(--primary); }
.wg-countdown-label { margin: 0 0 8px; font-weight: 700; font-size: 14px; }
.wg-countdown-boxes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; text-align: center; font-size: 11px; color: var(--muted); }
.wg-countdown-boxes span { display: grid; padding: 8px 0; border-radius: var(--radius-sm, 8px); background: var(--surface-2); }
.wg-countdown-boxes b { font-size: 22px; color: var(--text); font-variant-numeric: tabular-nums; }
.wg-countdown-badge { margin: 0; font-size: 14px; }
.wg-ring-wrap { display: flex; gap: 14px; align-items: center; }
.wg-ring-wrap p { display: grid; margin: 0; }
.wg-ring { display: grid; place-items: center; flex: none; width: 96px; height: 96px; border-radius: 50%; background: conic-gradient(var(--primary) calc(var(--p) * 1%), var(--surface-2) 0); }
.wg-ring span { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: var(--surface); }
.wg-ring b { font-size: 17px; font-variant-numeric: tabular-nums; }
.wg-step-blocks { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; margin: 6px 0; }
.wg-step-blocks i { height: 14px; border-radius: 3px; background: var(--surface-2); }
.wg-step-blocks i.is-on { background: var(--primary); }
.wg-progress-big { display: grid; justify-items: center; text-align: center; }
.wg-progress-big b { font-size: 52px; font-weight: 900; line-height: 1; letter-spacing: -0.05em; color: var(--primary); }
.wg-progress-big small { font-size: .45em; }
.wg-price-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.wg-price-card { display: grid; gap: 6px; align-content: start; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); }
.wg-price-card ul { margin: 0; padding-left: 16px; font-size: 13px; color: var(--muted); }
.wg-price { font-size: 20px; letter-spacing: -0.03em; }
.wg-price-card .wg-tag { justify-self: start; }
.wg-price-highlight .wg-price-card.is-pick { border: 2px solid var(--primary); box-shadow: var(--shadow-lg); transform: translateY(-6px); }
.wg-price-list li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.wg-price-list small { display: block; font-size: 12px; color: var(--muted); }
.wg-testimonial-quotes { display: grid; gap: 14px; }
.wg-testimonial-slide { margin: 0; padding: 14px; border-radius: var(--radius); background: var(--surface-2); }
.wg-testimonial-slide blockquote { margin: 0 0 8px; font-size: 14px; }
.wg-testimonial-slide figcaption { display: flex; align-items: center; }
.wg-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.wg-logo { display: grid; place-items: center; min-height: 44px; padding: 6px 10px; filter: grayscale(1); opacity: .8; transition: filter .2s, opacity .2s; font-weight: 800; color: var(--muted); }
.wg-logo:hover { filter: none; opacity: 1; }
.wg-logo img { max-height: 36px; max-width: 120px; }
.wg-logos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.wg-logos-grid .wg-logo { border: 1px solid var(--line); border-radius: var(--radius-sm, 8px); }
.wg-logos-row { justify-content: space-around; }
.wg-logos-marquee .wg-marquee-track { gap: 28px; }
.wg-ad { position: relative; padding: 22px 12px 12px; border: 1px dashed var(--line); border-radius: var(--radius-sm, 8px); text-align: center; }
.wg-ad-label { position: absolute; top: 4px; left: 8px; font-size: 10px; letter-spacing: .08em; color: var(--muted); }
.wg-stores { display: flex; flex-wrap: wrap; gap: 8px; }
.wg-store { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 10px; background: #111; color: #fff; font-weight: 700; font-size: 14px; line-height: 1.1; }
.wg-store:hover { color: #fff; opacity: .9; }
.wg-store small { display: block; font-size: 9px; font-weight: 500; opacity: .8; }
.wg-app-card { display: grid; justify-items: center; gap: 8px; padding: 16px; text-align: center; border-radius: var(--radius-lg); background: var(--surface-2); }
.wg-app-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; font-size: 28px; background: var(--primary); }

/* ---------- 연락·안내 */
.wg-kv-card { display: grid; gap: 8px; padding: 14px; border-radius: var(--radius); background: var(--surface-2); }
.wg-kv-card p { display: grid; margin: 0; }
.wg-kv-card small { font-size: 11px; color: var(--muted); }
.wg-kv-icons li { display: flex; gap: 10px; align-items: flex-start; padding: 5px 0; font-size: 14px; }
.wg-kv-icon { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--accent-soft); font-size: 14px; }
.wg-contact-stack { display: grid; gap: 6px; }
.wg-contact-btn { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: var(--radius); background: var(--surface-2); }
.wg-contact-btn:hover { background: var(--accent-soft); }
.wg-contact-btn > span:first-child { font-size: 20px; }
.wg-contact-btn b { display: block; font-size: 14px; }
.wg-contact-btn small { font-size: 12px; color: var(--muted); }
.wg-contact-row { display: flex; justify-content: space-around; gap: 6px; }
.wg-contact-row a { display: grid; justify-items: center; gap: 4px; font-size: 12px; }
.wg-contact-row a > span:first-child { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; font-size: 20px; background: var(--accent-soft); transition: transform .15s; }
.wg-contact-row a:hover > span:first-child { transform: translateY(-3px); }
.wg-hours-today { display: grid; gap: 4px; }
.wg-hours-today > b { font-size: 22px; letter-spacing: -0.02em; }
.wg-map { display: grid; gap: 6px; }
.wg-map p { margin: 0; }
.wg-map-compact { margin: 0; font-size: 14px; }
.wg-map-compact a { font-weight: 700; color: var(--primary); }
.wg-map-big { display: grid; justify-items: center; gap: 4px; padding: 16px 10px; text-align: center; border-radius: var(--radius-lg); background: var(--surface-2); }
.wg-map-big p { margin: 0; font-size: 14px; color: var(--muted); }
.wg-map-pin { font-size: 38px; line-height: 1; animation: wg-bounce 2s ease-in-out infinite; }
@keyframes wg-bounce { 50% { transform: translateY(-6px); } }
.wg-donation { display: grid; gap: 4px; justify-items: start; padding: 16px; border-radius: var(--radius); background: var(--accent-soft); }
.wg-donation strong { font-size: 17px; font-variant-numeric: tabular-nums; }
.wg-donation p { margin: 4px 0 0; }
.wg-donation-minimal { margin: 0; font-size: 14px; }
.wg-profile { display: flex; gap: 14px; align-items: flex-start; }
.wg-profile > div:not(.wg-chips) { display: grid; gap: 6px; }
.wg-profile p { margin: 0; font-size: 14px; color: var(--muted); }
.wg-profile-img { width: 56px; height: 56px; flex: none; border-radius: 50%; object-fit: cover; }
.wg-profile-center { flex-direction: column; align-items: center; text-align: center; }
.wg-profile-center .wg-chips { justify-content: center; }
.wg-profile-h { align-items: center; }
.wg-profile-h > div { flex: 1; min-width: 0; }
.wg-profile-minimal { margin: 0 0 8px; font-size: 14px; }
.wg-profile-cover { display: grid; justify-items: center; gap: 6px; text-align: center; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--line); padding-bottom: 16px; }
.wg-profile-cover-img { width: 100%; height: 90px; background: linear-gradient(135deg, var(--primary), var(--wg-accent)); background-image: var(--cover, linear-gradient(135deg, var(--primary), var(--wg-accent))); background-size: cover; background-position: center; }
.wg-profile-cover .wg-avatar, .wg-profile-cover .wg-profile-img { margin-top: -30px; box-shadow: 0 0 0 4px var(--surface); }
.wg-profile-cover .wg-avatar { background: color-mix(in srgb, var(--primary) 14%, var(--surface)); }
.wg-profile-cover p { margin: 0; padding: 0 14px; font-size: 14px; color: var(--muted); }
.wg-team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 12px 8px; text-align: center; }
.wg-team-grid > div { display: grid; justify-items: center; gap: 2px; font-size: 13px; }
.wg-team-img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.wg-status, .wg-status-pill { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 14px; }
.wg-status-dot { width: 10px; height: 10px; border-radius: 50%; background: #9aa3ad; }
.wg-status-open .wg-status-dot { background: #1baf7a; box-shadow: 0 0 0 3px color-mix(in srgb, #1baf7a 25%, transparent); }
.wg-status-prep .wg-status-dot { background: #d9a300; }
.wg-status-busy .wg-status-dot { background: #eb6834; }
.wg-status-pill { padding: 6px 14px; border-radius: 999px; font-weight: 700; background: var(--surface-2); }
.wg-status-card { display: grid; gap: 4px; justify-items: start; padding: 14px; border-radius: var(--radius); background: var(--surface-2); }
.wg-status-card > b { font-size: 20px; }
.wg-status-card p { margin: 0; font-size: 14px; }
.wg-lunch { display: grid; gap: 6px; padding: 14px; border-radius: var(--radius); background: var(--surface-2); }
.wg-lunch ul { margin: 0; padding-left: 18px; font-size: 15px; font-weight: 600; }
.wg-dday li { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 14px; border-bottom: 1px dashed var(--line); }
.wg-dday li > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 미디어·도구 */
.wg-video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); background: #000; }
.wg-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.wg-video-titled { display: grid; gap: 8px; }
.wg-video-thumb { position: relative; display: block; overflow: hidden; border-radius: var(--radius); aspect-ratio: 16 / 9; background: #000; }
.wg-video-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: opacity .2s, transform .3s; }
.wg-video-thumb:hover img { opacity: 1; transform: scale(1.03); }
.wg-play { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: rgba(0, 0, 0, .65); color: #fff; font-size: 20px; }
.wg-video-thumb-title { position: absolute; inset: auto 0 0; padding: 20px 12px 10px; color: #fff; font-weight: 700; background: linear-gradient(transparent, rgba(0, 0, 0, .7)); }
.wg-audio { width: 100%; }
.wg-audio-card { display: grid; gap: 8px; justify-items: start; padding: 14px; border-radius: var(--radius); background: var(--surface-2); }
.wg-audio-icon { font-size: 28px; }
.wg-clock-digital { display: grid; justify-items: center; gap: 2px; }
.wg-clock-digital b { font-size: 40px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.wg-clock-analog { position: relative; width: 140px; height: 140px; margin: 0 auto; border-radius: 50%; border: 3px solid var(--text); background: radial-gradient(circle, var(--text) 4px, transparent 5px), repeating-conic-gradient(from -1deg, var(--muted) 0 2deg, transparent 2deg 30deg), var(--surface); }
.wg-clock-analog::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--surface); z-index: 0; }
.wg-hand { position: absolute; left: 50%; bottom: 50%; z-index: 1; transform-origin: 50% 100%; border-radius: 3px; background: var(--text); }
.wg-hand-h { width: 5px; height: 34px; margin-left: -2.5px; transform: rotate(var(--h)); }
.wg-hand-m { width: 3px; height: 50px; margin-left: -1.5px; transform: rotate(var(--m)); }
.wg-hand-s { width: 2px; height: 56px; margin-left: -1px; transform: rotate(var(--s)); background: var(--primary); }
.wg-world li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--line); }
.wg-world b { font-size: 18px; font-variant-numeric: tabular-nums; }
.wg-date-card { display: grid; justify-items: center; gap: 0; padding: 14px; text-align: center; border-radius: var(--radius-lg); background: var(--surface-2); font-size: 13px; color: var(--muted); }
.wg-date-card > b { font-size: 56px; line-height: 1; font-weight: 900; letter-spacing: -0.05em; color: var(--text); }
.wg-clock-minimal { margin: 0; font-size: 14px; }
.wg-clock-minimal b { font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
    .wg-magazine, .wg-cta-split, .wg-banner-side { grid-template-columns: 1fr; }
    .wg-steps-h { grid-auto-flow: row; text-align: left; }
    .wg-steps-h li { justify-items: start; }
    .wg-steps-h li::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .wg-marquee-track, .wg-map-pin, .wg-live { animation: none; }
}