.elementor-kit-3{--e-global-color-primary:#F87614;--e-global-color-secondary:#3A67EA;--e-global-color-text:#101010;--e-global-color-accent:#FF9142;--e-global-color-0a85748:#FFFFFF;--e-global-color-1357c94:#F4F6FA;--e-global-color-3931664:#FFFFFF;--e-global-color-adaba70:#F5F7F8;--e-global-color-541c3f8:#272829;--e-global-color-e35b9a3:#292A2C;--e-global-color-920a4c4:#272829;--e-global-color-a2c3d7a:#313233;--e-global-color-3b201a1:#101010;--e-global-color-119af11:#404040;--e-global-color-2729de1:#606060;--e-global-color-8755c96:#555558;--e-global-color-d8cafaf:#F3F3F3;--e-global-color-f19a195:#CBCBCB;--e-global-color-5fd302e:#B5B5B5;--e-global-color-fbef7ca:#CBCBCB;--e-global-color-77a05fa:#EBEBEB;--e-global-color-dcac60a:#E3E5E8;--e-global-color-2dcefd0:#DADCDF;--e-global-color-741f6d0:#D3D6D7;--e-global-color-77b0325:#3A67EA;--e-global-color-be59f97:#6366F1;--e-global-color-8963868:#F87614;--e-global-color-82efcb6:#1F65EF;--e-global-color-1698343:#E538E2;--e-global-color-13d17b0:#10B981;--e-global-color-f28535e:#10B981;--e-global-color-44f5b34:#F59E0B;--e-global-color-56cb7dc:#EF4444;--e-global-color-aa18257:#3A67EA;--e-global-color-c9155c6:#F4361E;--e-global-typography-primary-font-family:"Noto Sans KR";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Noto Sans KR";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Noto Sans KR";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Noto Sans KR";--e-global-typography-accent-font-weight:500;}.elementor-kit-3 e-page-transition{background-color:#FFBC7D;}body{overflow-x:inherit !important;}.elementor a, .elementor a:link, .elementor a:focus, .elementor a:active, .elementor a:hover{text-decoration:inherit !important;}.elementor a:link, .elementor .smooth-hover a:link, {transition:inherit;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ================================
ROVER NEWS - COMPLETE STYLING
================================ */
/* Korean Font Stack - Web Font Import */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700&display=swap');
/* ROVER Color Variables */
:root {
--rover-orange: #F87614;
--rover-orange-hover: #E6690C;
--rover-blue-accent: #3B82F6;
--rover-blue-hover: #2563EB;
--rover-green-accent: #10B981;
--rover-white: #FFFFFF;
--rover-dark: #101010;
--rover-gray: #404040;
--rover-light-gray: #606060;
/* Light Mode Colors */
--rover-bg-main: #F4F6F8;
--rover-bg-surface: #FFFFFF;
--rover-bg-cards: #FFFFFF;
--rover-text-primary: #101010;
--rover-text-secondary: #404040;
--rover-text-caption: #606060;
--rover-border-light: #EBEBEB;
--rover-border-medium: #E3E5E8;
}
/* Dark Mode Colors */
body.dark {
--rover-bg-main: #141517;
--rover-bg-surface: #1C1E21;
--rover-bg-cards: #1C1E21;
--rover-text-primary: #F3F3F3;
--rover-text-secondary: #CBCBCB;
--rover-text-caption: #B5B5B5;
--rover-border-light: #313334;
--rover-border-medium: #383C3C;
--rover-orange: #F87614; /* Brighter orange for dark mode */
/* Additional dark mode variables for compatibility */
--rover-bg-dark: #202124;
--rover-bg-darker: #292a2d;
--rover-text-primary-dark: #e8eaed;
--rover-text-secondary-dark: #9aa0a6;
--rover-border-dark: #3c4043;
--rover-blue-accent: #8ab4f8;
--rover-accent-light: #8ab4f8;
}
/* Apply dark mode backgrounds */
html.dark, body.dark, .elementor-element-3a74dd1 {
background-color: var(--rover-bg-main, #141517) !important;
color: var(--rover-text-primary) !important;
}
html.dark .elementor-element-68017e6 .rover-headline-ticker,
html.dark .elementor-element-237f15e,
html.dark .elementor-element-73d0af8,
html.dark .elementor-element-ff00138,
html.dark .elementor-element-e744f5c,
html.dark .elementor-element-e55d6cc,
html.dark .elementor-element-0f64046,
body.dark .elementor-element-68017e6 .rover-headline-ticker,
body.dark .elementor-element-237f15e,
body.dark .elementor-element-73d0af8,
body.dark .elementor-element-ff00138,
body.dark .elementor-element-e744f5c,
body.dark .elementor-element-e55d6cc,
body.dark .elementor-element-0f64046 {
background-color: var(--rover-bg-surface, #1c1E21 ) !important;
}
body .elementor-element-0f64046,
.elementor-element-e744f5c,
.elementor-element-e55d6cc {
background-color: var(--rover-bg-surface, #FFFFFF ) !important;
border-radius: 8px !important;
box-shadow: 0 1px 4px rgba(138, 180, 248, 0.15) !important;
}
/* Typography Base Settings */
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Fallback Font Stack */
body,
.elementor-widget-text-editor,
.elementor-widget-heading {
font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}
/* Paragraphs - Korean standard with proper line-height */
/* === TYPOGRAPHY HIERARCHY - KOREAN OPTIMIZED === */
/* === TYPOGRAPHY HIERARCHY - KOREAN OPTIMIZED === */
/* Paragraphs - Korean standard with proper line-height */
.elementor-widget-theme-post-content p {
font-size: 1.1rem !important;
line-height: 1.7rem !important;
font-weight: 400 !important;
letter-spacing: -0.05em !important;
margin: 0 0 1.5rem 0 !important;
color: var(--e-global-color-text, #111111) !important;
word-break: keep-all !important;
overflow-wrap: break-word !important;
}
/* Headings - Korean newspaper hierarchy with proper line-heights */
.elementor-widget-theme-post-content h1 {
font-size: 2.2rem !important;
line-height: 2.6rem !important;
font-weight: 600 !important;
letter-spacing: -0.05em !important;
margin: 0 0 1.5rem 0 !important;
color: var(--e-global-color-text, #111111) !important;
word-break: keep-all !important;
}
.elementor-widget-theme-post-content h2 {
font-size: 1.75rem !important;
line-height: 2.4rem !important;
font-weight: 500 !important;
letter-spacing: -0.05em !important;
margin: 2.5rem 0 1.25rem 0 !important;
padding-bottom: 0.5rem !important;
border-bottom: 2px solid var(--e-global-color-primary, #111111) !important;
color: var(--e-global-color-text, #111111) !important;
word-break: keep-all !important;
}
.elementor-widget-theme-post-content h3 {
font-size: 1.5rem !important;
line-height: 2.2rem !important;
font-weight: 500 !important;
letter-spacing: -0.05em !important;
margin: 2rem 0 1rem 0 !important;
color: var(--e-global-color-text, #111111) !important;
word-break: keep-all !important;
}
.elementor-widget-theme-post-content h4 {
font-size: 1.25rem !important;
line-height: 2rem !important;
font-weight: 500 !important;
letter-spacing: -0.05em !important;
margin: 1.75rem 0 0.75rem 0 !important;
color: var(--e-global-color-text, #111111) !important;
word-break: keep-all !important;
}
.elementor-widget-theme-post-content h5,
.elementor-widget-theme-post-content h6 {
font-size: 1.125rem !important;
line-height: 1.8rem !important;
font-weight: 500 !important;
letter-spacing: -0.05em !important;
margin: 1.5rem 0 0.5rem 0 !important;
color: var(--e-global-color-text, #111111) !important;
word-break: keep-all !important;
}
/* === LINKS === */
.elementor-widget-theme-post-content a {
color: var(--e-global-color-primary, #009FE4) !important;
text-decoration: underline !important;
text-underline-offset: 0.2em !important;
text-decoration-thickness: 1px !important;
transition: all 0.2s ease !important;
}
.elementor-widget-theme-post-content a:hover {
color: var(--e-global-color-secondary, #00B8B4) !important;
text-decoration-thickness: 2px !important;
}
/* === LISTS - Korean News Standard === */
/* Unordered Lists */
.elementor-widget-theme-post-content ul {
margin: 1.5rem 0 !important;
padding-left: 0 !important;
list-style: none !important;
}
.elementor-widget-theme-post-content ul li {
position: relative !important;
font-size: 1.1rem !important;
line-height: 1.8rem !important;
font-weight: 400 !important;
letter-spacing: -0.05em !important;
margin: 0 0 1rem 0 !important;
padding-left: 1.5rem !important;
color: var(--e-global-color-text, #111111) !important;
word-break: keep-all !important;
}
.elementor-widget-theme-post-content ul li::before {
content: "•" !important;
position: absolute !important;
left: 0 !important;
top: 0 !important;
color: var(--e-global-color-primary, #111111) !important;
font-weight: 500 !important;
font-size: 1.2em !important;
}
/* Ordered Lists */
.elementor-widget-theme-post-content ol {
margin: 1.5rem 0 !important;
padding-left: 0 !important;
list-style: none !important;
counter-reset: ordered-counter !important;
}
.elementor-widget-theme-post-content ol li {
position: relative !important;
font-size: 1.1rem !important;
line-height: 1.8rem !important;
font-weight: 400 !important;
letter-spacing: -0.05em !important;
margin: 0 0 1rem 0 !important;
padding-left: 2rem !important;
color: var(--e-global-color-text, #111111) !important;
word-break: keep-all !important;
counter-increment: ordered-counter !important;
}
.elementor-widget-theme-post-content ol li::before {
content: counter(ordered-counter) "." !important;
position: absolute !important;
left: 0 !important;
top: 0 !important;
color: var(--e-global-color-primary, #111111) !important;
font-weight: 600 !important;
font-size: 1em !important;
min-width: 1.5rem !important;
}
/* Nested Lists */
.elementor-widget-theme-post-content ul ul,
.elementor-widget-theme-post-content ol ol,
.elementor-widget-theme-post-content ul ol,
.elementor-widget-theme-post-content ol ul {
margin: 0.5rem 0 !important;
padding-left: 1.5rem !important;
}
.elementor-widget-theme-post-content ul ul li::before {
content: "◦" !important;
color: var(--e-global-color-secondary, #00B8B4) !important;
}
/* === BLOCKQUOTES - Korean News Style === */
.elementor-widget-theme-post-content blockquote {
position: relative !important;
margin: 2rem 0 !important;
padding: 1.5rem 2rem 1.5rem 3rem !important;
background: var(--e-global-color-c6eb9e4, #F8F9FA) !important;
border-left: 4px solid var(--e-global-color-primary, #111111) !important;
font-style: normal !important;
border-radius: 0 8px 8px 0 !important;
}
.elementor-widget-theme-post-content blockquote::before {
content: "“" !important;
position: absolute !important;
left: 1rem !important;
top: 1rem !important;
font-size: 2rem !important;
color: var(--e-global-color-primary, #111111) !important;
font-weight: 600 !important;
line-height: 1 !important;
}
.elementor-widget-theme-post-content blockquote p {
font-size: 1.1rem !important;
line-height: 1.8rem !important;
font-weight: 400 !important;
color: var(--e-global-color-text, #111111) !important;
margin: 0 !important;
font-style: normal !important;
}
.elementor-widget-theme-post-content blockquote cite,
.elementor-widget-theme-post-content blockquote footer {
display: block !important;
margin-top: 1rem !important;
font-size: 0.95rem !important;
line-height: 1.6rem !important;
color: var(--e-global-color-2104387, #666) !important;
font-style: normal !important;
font-weight: 400 !important;
text-align: right !important;
}
.elementor-widget-theme-post-content blockquote cite::before,
.elementor-widget-theme-post-content blockquote footer::before {
content: "— " !important;
}
/* === INFO BOXES (using Gutenberg Group blocks) === */
/* General Info Box - add class "info-box" to Group block */
.elementor-widget-theme-post-content .wp-block-group.info-box {
margin: 2rem 0 !important;
padding: 1.5rem !important;
background: var(--e-global-color-c6eb9e4, #F8F9FA) !important;
border: 1px solid var(--e-global-color-divider, #E5E5E5) !important;
border-radius: 8px !important;
position: relative !important;
}
.elementor-widget-theme-post-content .wp-block-group.info-box::before {
content: "ℹ️" !important;
position: absolute !important;
top: 1rem !important;
right: 1rem !important;
font-size: 1.25rem !important;
}
.elementor-widget-theme-post-content .wp-block-group.info-box p {
font-size: 1rem !important;
line-height: 1.7rem !important;
font-weight: 400 !important;
margin-bottom: 0.75rem !important;
}
.elementor-widget-theme-post-content .wp-block-group.info-box p:last-child {
margin-bottom: 0 !important;
}
/* Warning Box - add class "warning-box" */
.elementor-widget-theme-post-content .wp-block-group.warning-box {
margin: 2rem 0 !important;
padding: 1.5rem !important;
background: #FFF3E0 !important;
border: 1px solid #FFB74D !important;
border-left: 4px solid #FF9800 !important;
border-radius: 8px !important;
position: relative !important;
}
.elementor-widget-theme-post-content .wp-block-group.warning-box::before {
content: "⚠️" !important;
position: absolute !important;
top: 1rem !important;
right: 1rem !important;
font-size: 1.25rem !important;
}
/* Success Box - add class "success-box" */
.elementor-widget-theme-post-content .wp-block-group.success-box {
margin: 2rem 0 !important;
padding: 1.5rem !important;
background: #E8F5E8 !important;
border: 1px solid #81C784 !important;
border-left: 4px solid #4CAF50 !important;
border-radius: 8px !important;
position: relative !important;
}
.elementor-widget-theme-post-content .wp-block-group.success-box::before {
content: "✅" !important;
position: absolute !important;
top: 1rem !important;
right: 1rem !important;
font-size: 1.25rem !important;
}
/* Key Point Box - add class "key-point" */
.elementor-widget-theme-post-content .wp-block-group.key-point {
margin: 2rem 0 !important;
padding: 1.5rem 2rem !important;
background: linear-gradient(135deg, var(--e-global-color-primary, #111111) 0%, var(--e-global-color-accent, #FC9700) 100%) !important;
color: white !important;
border-radius: 12px !important;
position: relative !important;
box-shadow: 0 4px 12px rgba(255, 84, 112, 0.2) !important;
}
.elementor-widget-theme-post-content .wp-block-group.key-point::before {
content: "📌" !important;
position: absolute !important;
top: 1rem !important;
right: 1.5rem !important;
font-size: 1.25rem !important;
}
.elementor-widget-theme-post-content .wp-block-group.key-point p {
color: white !important;
font-weight: 400 !important;
line-height: 1.7rem !important;
}
.elementor-widget-theme-post-content .wp-block-group.key-point h3,
.elementor-widget-theme-post-content .wp-block-group.key-point h4 {
color: white !important;
font-weight: 600 !important;
margin-top: 0 !important;
}
/* === IMAGES AND MEDIA === */
.elementor-widget-theme-post-content img {
max-width: 100% !important;
height: auto !important;
border-radius: 8px !important;
margin: 1.5rem 0 !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}
.elementor-widget-theme-post-content figure {
margin: 2rem 0 !important;
text-align: center !important;
}
.elementor-widget-theme-post-content figcaption {
font-size: 0.9rem !important;
line-height: 1.5rem !important;
color: var(--e-global-color-2104387, #666) !important;
margin-top: 0.5rem !important;
font-style: italic !important;
font-weight: 400 !important;
text-align: left !important;
}
/* === TABLE STYLING === */
.elementor-widget-theme-post-content table {
width: 100% !important;
border-collapse: collapse !important;
margin: 2rem 0 !important;
background: var(--e-global-color-b6ee983, #ffffff) !important;
border-radius: 8px !important;
overflow: hidden !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}
.elementor-widget-theme-post-content th {
background: var(--e-global-color-primary, #009FE4) !important;
color: white !important;
padding: 1rem !important;
text-align: left !important;
font-weight: 600 !important;
font-size: 1rem !important;
line-height: 1.6rem !important;
}
.elementor-widget-theme-post-content td {
padding: 1rem !important;
border-bottom: 1px solid var(--e-global-color-divider, #E5E5E5) !important;
font-size: 1rem !important;
line-height: 1.7rem !important;
font-weight: 400 !important;
}
.elementor-widget-theme-post-content tr:nth-child(even) {
background: var(--e-global-color-c6eb9e4, #F8F9FA) !important;
}
/* === CODE BLOCKS === */
.elementor-widget-theme-post-content code {
background: var(--e-global-color-c6eb9e4, #F8F9FA) !important;
padding: 0.2em 0.4em !important;
border-radius: 4px !important;
font-family: "SFMono-Regular", "Monaco", "Inconsolata", "Fira Code", monospace !important;
font-size: 0.9em !important;
font-weight: 400 !important;
color: var(--e-global-color-primary, #009FE4) !important;
}
.elementor-widget-theme-post-content pre {
background: var(--e-global-color-2104387, #2D3748) !important;
color: #E2E8F0 !important;
padding: 1.5rem !important;
border-radius: 8px !important;
overflow-x: auto !important;
margin: 2rem 0 !important;
font-family: "SFMono-Regular", "Monaco", "Inconsolata", "Fira Code", monospace !important;
font-size: 0.9rem !important;
font-weight: 400 !important;
line-height: 1.5 !important;
}
.elementor-widget-theme-post-content pre code {
background: none !important;
padding: 0 !important;
color: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
}
/* === HORIZONTAL RULE === */
.elementor-widget-theme-post-content hr {
border: none !important;
height: 2px !important;
background: linear-gradient(90deg, transparent, var(--rover-orange, #F87614), transparent) !important;
margin: 3rem 0 !important;
}
/* === RESPONSIVE DESIGN === */
/* Tablet */
@media (max-width: 1024px) {
.elementor-widget-theme-post-content p {
font-size: 1.15rem !important;
line-height: 1.75rem !important;
}
.elementor-widget-theme-post-content h1 {
font-size: 2rem !important;
line-height: 2.4rem !important;
}
.elementor-widget-theme-post-content h2 {
font-size: 1.6rem !important;
line-height: 2.2rem !important;
}
.elementor-widget-theme-post-content h3 {
font-size: 1.375rem !important;
line-height: 2rem !important;
}
.elementor-widget-theme-post-content .wp-block-group.info-box,
.elementor-widget-theme-post-content .wp-block-group.warning-box,
.elementor-widget-theme-post-content .wp-block-group.success-box,
.elementor-widget-theme-post-content .wp-block-group.key-point {
padding: 1.25rem !important;
}
}
/* Mobile */
@media (max-width: 768px) {
.elementor-widget-theme-post-content p {
font-size: 1.1rem !important;
line-height: 1.8rem !important;
margin-bottom: 1.25rem !important;
}
.elementor-widget-theme-post-content h1 {
font-size: 1.75rem !important;
line-height: 2.2rem !important;
}
.elementor-widget-theme-post-content h2 {
font-size: 1.5rem !important;
line-height: 2rem !important;
margin: 2rem 0 1rem 0 !important;
}
.elementor-widget-theme-post-content h3 {
font-size: 1.25rem !important;
line-height: 1.8rem !important;
}
.elementor-widget-theme-post-content h4 {
font-size: 1.125rem !important;
line-height: 1.7rem !important;
}
.elementor-widget-theme-post-content ul li,
.elementor-widget-theme-post-content ol li {
font-size: 1rem !important;
line-height: 1.7rem !important;
padding-left: 1.25rem !important;
}
.elementor-widget-theme-post-content ol li {
padding-left: 1.75rem !important;
}
.elementor-widget-theme-post-content blockquote {
padding: 1.25rem 1.5rem 1.25rem 2.5rem !important;
margin: 1.5rem 0 !important;
}
.elementor-widget-theme-post-content .wp-block-group.info-box,
.elementor-widget-theme-post-content .wp-block-group.warning-box,
.elementor-widget-theme-post-content .wp-block-group.success-box {
padding: 1rem !important;
margin: 1.5rem 0 !important;
}
.elementor-widget-theme-post-content .wp-block-group.key-point {
padding: 1rem 1.5rem !important;
margin: 1.5rem 0 !important;
}
.elementor-widget-theme-post-content table {
font-size: 0.9rem !important;
}
.elementor-widget-theme-post-content th {
line-height: 1.5rem !important;
}
.elementor-widget-theme-post-content td {
padding: 0.75rem 0.5rem !important;
line-height: 1.6rem !important;
}
}
/* Small Mobile */
@media (max-width: 480px) {
.elementor-widget-theme-post-content p {
font-size: 1rem !important;
line-height: 1.7rem !important;
}
.elementor-widget-theme-post-content h1 {
font-size: 1.5rem !important;
line-height: 2rem !important;
}
.elementor-widget-theme-post-content h2 {
font-size: 1.3rem !important;
line-height: 1.8rem !important;
}
.elementor-widget-theme-post-content h3 {
font-size: 1.15rem !important;
line-height: 1.65rem !important;
}
.elementor-widget-theme-post-content blockquote {
padding: 1rem 1.25rem 1rem 2rem !important;
}
.elementor-widget-theme-post-content .wp-block-group.key-point {
padding: 1rem !important;
}
}
/* === DARK MODE OVERRIDES === */
html.dark .elementor-widget-theme-post-content p,
html.dark .elementor-widget-theme-post-content li,
html.dark .elementor-widget-theme-post-content h1,
html.dark .elementor-widget-theme-post-content h2,
html.dark .elementor-widget-theme-post-content h3,
html.dark .elementor-widget-theme-post-content h4,
html.dark .elementor-widget-theme-post-content h5,
html.dark .elementor-widget-theme-post-content h6,
body.dark .elementor-widget-theme-post-content p,
body.dark .elementor-widget-theme-post-content li,
body.dark .elementor-widget-theme-post-content h1,
body.dark .elementor-widget-theme-post-content h2,
body.dark .elementor-widget-theme-post-content h3,
body.dark .elementor-widget-theme-post-content h4,
body.dark .elementor-widget-theme-post-content h5,
body.dark .elementor-widget-theme-post-content h6 {
color: var(--rover-text-primary, #101010) !important;
}
html.dark .elementor-widget-theme-post-content h2,
body.dark .elementor-widget-theme-post-content h2 {
border-bottom-color: var(--rover-orange, #F87614) !important;
}
html.dark .elementor-widget-theme-post-content blockquote,
body.dark .elementor-widget-theme-post-content blockquote {
background: var(--rover-bg-surface, #FFFFFF) !important;
border-left-color: var(--e-global-color-primary, #111111) !important;
}
html.dark .elementor-widget-theme-post-content .wp-block-group.info-box,
body.dark .elementor-widget-theme-post-content .wp-block-group.info-box {
background: var(--rover-bg-surface, #FFFFFF) !important;
border-color: var(--e-global-color-divider, #444) !important;
}
html.dark .elementor-widget-theme-post-content .wp-block-group.warning-box,
body.dark .elementor-widget-theme-post-content .wp-block-group.warning-box {
background: #3E2723 !important;
border-color: #FF8A65 !important;
border-left-color: #FF9800 !important;
}
html.dark .elementor-widget-theme-post-content .wp-block-group.success-box,
body.dark .elementor-widget-theme-post-content .wp-block-group.success-box {
background: #1B5E20 !important;
border-color: #66BB6A !important;
border-left-color: #4CAF50 !important;
}
html.dark .elementor-widget-theme-post-content table,
body.dark .elementor-widget-theme-post-content table {
background: var(--e-global-color-background, #222222) !important;
}
html.dark .elementor-widget-theme-post-content td,
body.dark .elementor-widget-theme-post-content td {
border-bottom-color: var(--e-global-color-divider, #444) !important;
}
html.dark .elementor-widget-theme-post-content tr:nth-child(even),
body.dark .elementor-widget-theme-post-content tr:nth-child(even) {
background: var(--rover-bg-surface, #FFFFFF) !important;
}
html.dark .elementor-widget-theme-post-content code,
body.dark .elementor-widget-theme-post-content code {
background: var(--rover-bg-surface, #FFFFFF) !important;
color: var(--rover-orange, #F87614) !important;
}
html.dark .elementor-widget-theme-post-content figcaption,
body.dark .elementor-widget-theme-post-content figcaption {
color: var(--rover-text-primary, #101010) !important;
opacity: 0.8 !important;
}
/* Heading Specific Overrides */
h1 {
font-size: 28px !important;
font-weight: 700 !important;
line-height: 1.25 !important;
letter-spacing: -0.03em !important;
margin-bottom: 16px !important;
color: var(--rover-text-primary) !important;
}
h2 {
font-size: 22px !important;
font-weight: 600 !important;
line-height: 1.3 !important;
letter-spacing: -0.02em !important;
margin-bottom: 12px !important;
color: var(--rover-text-primary) !important;
}
h3 {
font-size: 18px !important;
font-weight: 600 !important;
line-height: 1.35 !important;
letter-spacing: -0.01em !important;
margin-bottom: 10px !important;
color: var(--rover-text-primary) !important;
}
h4 {
font-size: 16px !important;
font-weight: 500 !important;
line-height: 1.4 !important;
margin-bottom: 8px !important;
color: var(--rover-text-primary) !important;
}
h5, h6 {
font-size: 14px !important;
font-weight: 500 !important;
line-height: 1.45 !important;
margin-bottom: 6px !important;
color: var(--rover-text-primary) !important;
}
/* Body Text */
p {
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.7 !important;
margin-bottom: 16px !important;
color: var(--rover-text-secondary) !important;
}
/* Navigation Menu Typography */
.elementor-nav-menu--main .elementor-item {
font-weight: 500 !important;
font-size: 16px !important;
letter-spacing: 0em !important;
color: var(--rover-white, #FFFFFF) !important;
padding: 12px 16px !important;
text-decoration: none !important;
transition: all 0.2s ease !important;
border-bottom: 3px solid transparent !important;
}
.elementor-nav-menu--main .elementor-item:hover {
color: var(--rover-bg-main, #F4F6F8) !important;
}
html.dark .elementor-nav-menu--main .elementor-item:hover,
body.dark .elementor-nav-menu--main .elementor-item:hover {
color: var(--rover-bg-main, #F4F6F8) !important;
}
.elementor-nav-menu--main .elementor-item.elementor-item-active {
color: var(--rover-bg-main, #F4F6F8) !important;
font-weight: 600 !important;
}
html.dark .elementor-nav-menu--main .elementor-item.elementor-item-active,
body.dark .elementor-nav-menu--main .elementor-item.elementor-item-active {
color: var(--rover-bg-main, #F4F6F8) !important;
}
/* Button Typography */
.elementor-button {
font-weight: 600 !important;
font-size: 14px !important;
letter-spacing: 0.02em !important;
background-color: var(--rover-orange, #F87614) !important;
color: var(--rover-white) !important;
border: 1px solid var(--rover-orange, #F87614) !important;
}
.elementor-button:hover {
background-color: var(--rover-orange-hover) !important;
color: var(--rover-white) !important;
}
html.dark .elementor-button,
body.dark .elementor-button {
background-color: var(--rover-orange, #F87614) !important;
border-color: var(--rover-orange, #F87614) !important;
}
/* Posts Widget Typography */
.elementor-post__title {
font-weight: 600 !important;
line-height: 1.35 !important;
letter-spacing: -0.01em !important;
}
.elementor-post__title a {
color: var(--rover-text-primary) !important;
text-decoration: none !important;
}
.elementor-post__title a:hover {
color: var(--rover-orange, #F87614) !important;
}
html.dark .elementor-post__title a:hover,
body.dark .elementor-post__title a:hover {
color: var(--rover-orange, #F87614) !important;
}
.elementor-post__excerpt {
font-size: 15px !important;
line-height: 1.6 !important;
font-weight: 400 !important;
color: var(--rover-text-secondary) !important;
}
.elementor-post__meta-data {
font-size: 13px !important;
font-weight: 400 !important;
line-height: 1.4 !important;
color: var(--rover-text-caption) !important;
}
/* Responsive Typography */
@media (max-width: 768px) {
h1 { font-size: 24px !important; }
h2 { font-size: 20px !important; }
h3 { font-size: 16px !important; }
h4 { font-size: 15px !important; }
p { font-size: 15px !important; }
.elementor-nav-menu--main .elementor-item {
font-size: 15px !important;
}
}
@media (max-width: 480px) {
h1 { font-size: 22px !important; }
h2 { font-size: 18px !important; }
p { font-size: 14px !important; line-height: 1.8 !important; }
}
/* Article Content Typography */
.article-content {
font-size: 17px !important;
line-height: 1.8 !important;
font-weight: 400 !important;
color: var(--rover-text-secondary) !important;
}
.article-title {
font-size: 32px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
letter-spacing: -0.04em !important;
margin-bottom: 10px !important;
color: var(--rover-text-primary) !important;
}
@media (max-width: 768px) {
.article-content {
font-size: 16px !important;
line-height: 1.9 !important;
}
.article-title {
font-size: 26px !important;
line-height: 1.25 !important;
}
}
/* News Card Typography */
.news-card-title {
font-size: 16px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
letter-spacing: -0.01em !important;
color: var(--rover-text-primary) !important;
}
.news-card-excerpt {
font-size: 14px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
color: var(--rover-text-secondary) !important;
}
.news-card-meta {
font-size: 12px !important;
font-weight: 400 !important;
color: var(--rover-text-caption) !important;
}
/* Section Header Typography */
.section-header {
font-size: 20px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
letter-spacing: -0.02em !important;
margin-bottom: 16px !important;
color: var(--rover-text-primary) !important;
border-bottom: 2px solid var(--rover-orange, #F87614) !important;
padding-bottom: 8px !important;
}
html.dark .section-header,
body.dark .section-header {
border-bottom-color: var(--rover-orange, #F87614) !important;
}
/* Form Typography */
input, textarea, select {
font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif !important;
font-size: 15px !important;
line-height: 1.5 !important;
color: var(--rover-text-primary) !important;
background-color: var(--rover-bg-surface) !important;
border: 1px solid var(--rover-border-light) !important;
}
label {
font-size: 13px !important;
font-weight: 500 !important;
line-height: 1.4 !important;
color: var(--rover-text-secondary) !important;
}
/* Special Korean Typography Features */
.korean-emphasis {
font-weight: 600 !important;
letter-spacing: -0.01em !important;
}
.korean-small-text {
font-size: 13px !important;
line-height: 1.5 !important;
font-weight: 400 !important;
}
/* ================================
PAGE BACKGROUND AND LAYOUT
================================ */
/* Page Background Override */
body,
.elementor-section.elementor-section-full_width {
background-color: var(--rover-bg-main) !important;
}
/* Main containers (90% width containers) */
.elementor-container[data-id="46ff7eb3"],
.elementor-container[data-id="358e8328"],
.elementor-container[data-id="12a436df"],
.elementor-container[data-id="f66669e"] {
background-color: var(--rover-bg-surface) !important;
border: 1px solid var(--rover-border-light) !important;
}
/* News section cards */
.elementor-container[data-id="69169b88"],
.elementor-container[data-id="6a79afbb"] {
background-color: var(--rover-bg-surface) !important;
border: 1px solid var(--rover-border-light) !important;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
}
html.dark .elementor-container[data-id="69169b88"],
body.dark .elementor-container[data-id="69169b88"],
html.dark .elementor-container[data-id="6a79afbb"],
body.dark .elementor-container[data-id="6a79afbb"] {
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
}
/* ================================
TAXONOMY FILTER FIXES
================================ */
/* Taxonomy filter styling (홈, categories, etc.) */
.elementor-widget-taxonomy-filter .taxonomy-filter-item {
color: var(--rover-text-secondary) !important;
background-color: transparent !important;
font-family: 'Noto Sans KR', sans-serif !important;
font-weight: 700 !important;
text-transform: uppercase !important;
padding: 0 10px 10px 10px !important;
border-bottom: 2px solid transparent !important;
transition: all 0.2s ease !important;
}
.elementor-widget-taxonomy-filter .taxonomy-filter-item:hover {
color: var(--rover-orange, #F87614) !important;
border-bottom-color: var(--rover-orange, #F87614) !important;
}
.elementor-widget-taxonomy-filter .taxonomy-filter-item.active {
color: var(--rover-orange, #F87614) !important;
border-bottom-color: var(--rover-orange, #F87614) !important;
}
html.dark .elementor-widget-taxonomy-filter .taxonomy-filter-item:hover,
body.dark .elementor-widget-taxonomy-filter .taxonomy-filter-item:hover,
html.dark .elementor-widget-taxonomy-filter .taxonomy-filter-item.active,
body.dark .elementor-widget-taxonomy-filter .taxonomy-filter-item.active {
color: var(--rover-orange, #F87614) !important;
border-bottom-color: var(--rover-orange, #F87614) !important;
}
/* ================================
ROVER BASEBALL SCORES WIDGET
================================ */
/* Modern Korean sports container with rover styling */
.korean-sports-static {
font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", sans-serif !important;
background: linear-gradient(135deg, var(--rover-bg-cards) 0%, var(--rover-bg-surface) 100%) !important;
border: 1px solid var(--rover-border-light) !important;
border-radius: 12px !important;
overflow: hidden !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
height: 48px !important;
width: auto !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
padding: 0 !important;
position: relative !important;
transition: all 0.3s ease !important;
}
.korean-sports-static:hover {
box-shadow: 0 6px 4px rgba(59, 130, 246, 0.12) !important;
}
/* Dark mode for baseball widget */
html.dark .korean-sports-static,
body.dark .korean-sports-static {
background: linear-gradient(135deg, var(--rover-bg-cards) 0%, var(--rover-bg-surface) 100%) !important;
border-color: var(--rover-border-medium) !important;
color: var(--rover-text-primary) !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}
html.dark .korean-sports-static:hover,
body.dark .korean-sports-static:hover {
box-shadow: 0 6px 4px rgba(59, 130, 246, 0.15) !important;
}
/* Dark mode for weather widget */
html.dark .korean-weather-widget,
body.dark .korean-weather-widget {
background: linear-gradient(135deg, var(--rover-bg-cards) 0%, var(--rover-bg-surface) 100%) !important;
border-color: var(--rover-border-medium) !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}
html.dark .korean-weather-widget:hover,
body.dark .korean-weather-widget:hover {
box-shadow: 0 6px 4px rgba(59, 130, 246, 0.15) !important;
}
html.dark .korean-weather-widget .weather-temp,
body.dark .korean-weather-widget .weather-temp {
color: var(--rover-text-primary) !important;
}
html.dark .korean-weather-widget .weather-condition,
body.dark .korean-weather-widget .weather-condition {
color: var(--rover-text-secondary) !important;
}
html.dark .baseball-game-item,
body.dark .baseball-game-item {
border-right-color: var(--rover-border-light) !important;
}
html.dark .baseball-game-item:hover,
body.dark .baseball-game-item:hover {
background-color: rgba(255, 145, 66, 0.05) !important;
}
html.dark .team-name,
body.dark .team-name {
color: var(--rover-text-primary) !important;
}
html.dark .team-score,
body.dark .team-score {
color: var(--rover-text-secondary) !important;
}
html.dark .team-score.winning,
body.dark .team-score.winning {
color: #4ADE80 !important;
}
/* Container for baseball game items */
.baseball-games-container {
display: flex !important;
align-items: center !important;
height: 100% !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
white-space: nowrap !important;
padding: 0 10px !important;
scroll-snap-type: x mandatory !important;
}
/* Hide scrollbars */
.baseball-games-container::-webkit-scrollbar {
display: none !important;
}
/* Individual baseball game item - Modern card style */
.baseball-game-item {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 8px 16px !important;
border-right: 1px solid var(--rover-border-light) !important;
transition: all 0.2s ease !important;
height: 48px !important;
min-width: 240px !important;
font-size: 12px !important;
flex-shrink: 0 !important;
background: transparent !important;
scroll-snap-align: start !important;
position: relative !important;
}
.baseball-game-item::before {
content: '';
position: absolute !important;
left: 0 !important;
top: 10% !important;
height: 80% !important;
width: 2px !important;
background: var(--rover-blue-accent) !important;
opacity: 0 !important;
transition: opacity 0.2s ease !important;
}
.baseball-game-item:last-child {
border-right: none !important;
}
.baseball-game-item:hover {
background: linear-gradient(90deg, rgba(59, 130, 246, 0.05) 0%, rgba(59, 130, 246, 0.01) 100%) !important;
}
.baseball-game-item:hover::before {
opacity: 1 !important;
}
/* Status container */
.game-status-container {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
gap: 2px !important;
font-size: 10px !important;
white-space: nowrap !important;
text-align: center !important;
}
.game-status-top {
font-size: 9px !important;
font-weight: 600 !important;
line-height: 1 !important;
}
.game-status-bottom {
font-size: 10px !important;
font-weight: 600 !important;
line-height: 1 !important;
text-transform: uppercase !important;
padding: 2px !important;
border-radius: 2px !important;
color: white !important;
}
/* Status colors - Updated for rover theme */
.game-status-bottom.live {
background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%) !important;
box-shadow: 0 2px 4px rgba(239, 68, 68, 0.1) !important;
}
.game-status-bottom.finished {
background: linear-gradient(135deg, var(--rover-blue-accent) 0%, var(--rover-blue-hover) 100%) !important;
box-shadow: 0 2px 4px rgba(59, 130, 246, 0.1) !important;
}
.game-status-bottom.upcoming {
background: linear-gradient(135deg, var(--rover-green-accent) 0%, #059669 100%) !important;
box-shadow: 0 2px 4px rgba(16, 185, 129, 0.1) !important;
}
.game-status-bottom.cancelled {
background: linear-gradient(135deg, #6B7280 0%, #4B5563 100%) !important;
box-shadow: 0 2px 4px rgba(107, 114, 128, 0.1) !important;
}
/* Teams section */
.teams-section,
.team-container,
.team-info {
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
}
/* Away team reversed layout */
.team-container.team-away {
flex-direction: row-reverse !important;
}
.team-container.team-away .team-info {
flex-direction: row-reverse !important;
gap: 3px !important;
}
/* Team icons */
.team-icon {
font-size: 14px !important;
line-height: 1 !important;
filter: drop-shadow(0 1px 1px rgba(0,0,0,0.2)) !important;
}
/* Team names */
.team-name {
font-weight: 600 !important;
font-size: 11px !important;
color: #333333 !important;
}
/* Team scores */
.team-score {
font-weight: 700 !important;
font-size: 14px !important;
color: var(--rover-text-secondary) !important;
min-width: 20px !important;
text-align: center !important;
padding: 2px 6px !important;
border-radius: 4px !important;
background: rgba(59, 130, 246, 0.08) !important;
transition: all 0.2s ease !important;
}
.team-score.winning {
color: white !important;
background: linear-gradient(135deg, var(--rover-green-accent) 0%, #059669 100%) !important;
font-weight: 800 !important;
box-shadow: 0 2px 4px rgba(16, 185, 129, 0.1) !important;
}
/* Mobile responsive styles for baseball */
@media screen and (max-width: 768px) {
.korean-sports-static { height: 28px !important; }
.baseball-game-item {
height: 28px !important;
padding: 0 10px !important;
min-width: 45% !important;
font-size: 10px !important;
}
.team-icon { font-size: 12px !important; }
.team-name { font-size: 10px !important; }
.team-score { font-size: 11px !important; }
.game-status-top { font-size: 8px !important; }
.game-status-bottom { font-size: 8px !important; }
}
@media screen and (max-width: 480px) {
.korean-sports-static { height: 40px !important; }
.baseball-game-item {
height: 40px !important;
min-width: 48% !important;
font-size: 10px !important;
}
.team-icon { font-size: 15px !important; }
.team-name { font-size: 10px !important; }
.team-score { font-size: 12px !important; min-width: 12px !important; }
.game-status-top { font-size: 9px !important; }
.game-status-bottom { font-size: 11px !important; }
}
/* ================================
WEATHER WIDGET STYLES
================================ */
/* Minimal header weather widget (reverted to simple styling) */
.korean-weather-widget-header {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 13px;
color: #333;
white-space: nowrap;
padding: 4px 8px;
background: rgba(255, 255, 255, 0.9);
border-radius: 6px;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.korean-weather-widget-header .weather-icon {
font-size: 16px;
line-height: 1;
}
.korean-weather-widget-header .weather-temp {
font-weight: 500;
color: #2c5aa0;
}
.korean-weather-widget-header .weather-date {
color: #666;
font-size: 11px;
margin-left: 2px;
}
/* Weather Column Widget - Naver inspired */
.weather-column {
background: #fff;
border: none;
border-radius: 8px;
overflow: hidden;
font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
width: 100%;
}
.weather-column__header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
border-bottom: 1px solid #f1f3f4;
background: #fafbfc;
}
.weather-column__title {
font-size: 14px;
font-weight: 600;
color: #202124;
margin: 0;
}
.weather-column__more {
font-size: 12px;
color: #1a73e8;
text-decoration: none;
font-weight: 500;
}
.weather-column__more:hover {
text-decoration: underline;
}
.weather-column__items {
padding: 0;
}
.weather-column__item {
display: flex;
align-items: center;
padding: 8px 16px;
border-bottom: 1px solid #f1f3f4;
transition: background-color 0.15s ease;
}
.weather-column__item:last-child {
border-bottom: none;
}
.weather-column__item:hover {
background-color: #f8f9fa;
}
.weather-column__date {
min-width: 40px;
margin-right: 12px;
}
.weather-column__day {
display: block;
font-size: 12px;
font-weight: 500;
color: #202124;
line-height: 1.2;
}
.weather-column__weekday {
display: block;
font-size: 10px;
color: #5f6368;
line-height: 1.2;
}
.weather-column__icon {
font-size: 18px;
margin-right: 12px;
line-height: 1;
}
.weather-column__temp {
font-size: 13px;
font-weight: 500;
color: #202124;
margin-left: auto;
}
/* Weather Ticker Widget - Daum inspired */
.weather-ticker {
background: #fff;
border: 1px solid #e1e5e9;
border-radius: 8px;
overflow: hidden;
font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
position: relative;
}
.weather-ticker__container {
display: flex;
flex-direction: column;
animation: weatherTickerScroll linear infinite;
gap: 0;
}
.weather-ticker__item {
display: flex;
align-items: center;
padding: 8px 12px;
border-bottom: 1px solid #f1f3f4;
min-height: 40px;
background: #fff;
}
.weather-ticker__item:last-child {
border-bottom: none;
}
.weather-ticker__date {
min-width: 60px;
font-size: 11px;
color: #5f6368;
font-weight: 500;
margin-right: 8px;
}
.weather-ticker__icon {
font-size: 16px;
margin-right: 8px;
line-height: 1;
}
.weather-ticker__temp {
font-size: 12px;
font-weight: 600;
color: #1a73e8;
margin-right: 8px;
}
.weather-ticker__condition {
font-size: 11px;
color: #5f6368;
margin-left: auto;
}
@keyframes weatherTickerScroll {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-100%);
}
}
/* Dark mode support using body.dark class */
html.dark .weather-column,
body.dark .weather-column,
html.dark .weather-ticker,
body.dark .weather-ticker {
background: var(--rover-bg-dark, #202124);
border-color: var(--rover-border-dark, #3c4043);
color: var(--rover-text-primary-dark, #e8eaed);
}
html.dark .weather-column__header,
body.dark .weather-column__header {
background: var(--rover-bg-darker, #292a2d);
border-color: var(--rover-border-dark, #3c4043);
}
html.dark .weather-column__title,
body.dark .weather-column__title,
html.dark .weather-column__day,
body.dark .weather-column__day,
html.dark .weather-column__temp,
body.dark .weather-column__temp {
color: var(--rover-text-primary-dark, #e8eaed);
}
html.dark .weather-column__weekday,
body.dark .weather-column__weekday,
html.dark .weather-ticker__date,
body.dark .weather-ticker__date,
html.dark .weather-ticker__condition,
body.dark .weather-ticker__condition {
color: var(--rover-text-secondary-dark, #9aa0a6);
}
html.dark .weather-column__item:hover,
body.dark .weather-column__item:hover,
html.dark .weather-ticker__item:last-child,
body.dark .weather-ticker__item:last-child {
background-color: var(--rover-bg-darker, #292a2d);
}
html.dark .weather-ticker__item,
body.dark .weather-ticker__item {
background: var(--rover-bg-dark, #202124);
border-color: var(--rover-border-dark, #3c4043);
}
/* Responsive adjustments */
@media (max-width: 768px) {
.weather-column {
max-width: 100%;
}
.weather-ticker {
height: 160px !important;
}
.weather-ticker__item {
min-height: 36px;
padding: 6px 10px;
}
.weather-ticker__date {
min-width: 50px;
font-size: 10px;
}
.weather-ticker__icon {
font-size: 14px;
}
.weather-ticker__temp {
font-size: 11px;
}
}
/* Weather Icon - Enhanced with rover styling */
.korean-weather-widget .weather-icon {
font-size: 20px !important;
margin: 0 !important;
display: inline-block !important;
line-height: 1 !important;
filter: drop-shadow(0 2px 4px rgba(59, 130, 246, 0.3)) !important;
flex-shrink: 0 !important;
padding: 6px !important;
background: linear-gradient(135deg, var(--rover-blue-accent) 0%, var(--rover-blue-hover) 100%) !important;
color: white !important;
border-radius: 50% !important;
transition: all 0.2s ease !important;
position: relative !important;
z-index: 1 !important;
}
/* Temperature */
.korean-weather-widget .weather-temp {
font-size: 16px;
font-weight: 500;
margin: 0;
line-height: 1;
color: white;
flex-shrink: 0;
}
/* Condition */
.korean-weather-widget .weather-condition {
font-size: 13px;
font-weight: 500;
margin: 0;
opacity: 0.9;
color: white;
flex-shrink: 0;
}
/* Date */
.korean-weather-widget .weather-date {
font-size: 13px;
font-weight: 500;
opacity: 0.8;
color: white;
margin: 0;
border: none;
padding: 0;
flex-shrink: 0;
}
/* Weather widget variants */
.korean-weather-widget.compact {
padding: 6px 10px;
gap: 6px;
}
.korean-weather-widget.compact .weather-icon {
font-size: 16px;
}
.korean-weather-widget.compact .weather-temp {
font-size: 14px;
}
.korean-weather-widget.compact .weather-condition {
font-size: 12px;
}
/* Icon-only variant */
.korean-weather-widget.icon-only {
padding: 6px 8px;
gap: 0;
}
.korean-weather-widget.icon-only .weather-icon {
font-size: 18px;
}
.korean-weather-widget.icon-only .weather-temp,
.korean-weather-widget.icon-only .weather-condition,
.korean-weather-widget.icon-only .weather-date {
display: none;
}
/* Minimal variant (icon + temp + date) */
.korean-weather-widget.minimal {
padding: 6px 10px;
gap: 6px;
}
.korean-weather-widget.minimal .weather-condition {
display: none;
}
/* Divider between elements */
.korean-weather-widget.with-dividers .weather-temp::after,
.korean-weather-widget.with-dividers .weather-condition::after {
content: "·";
margin-left: 6px;
opacity: 0.5;
}
/* Optional styling variants */
.korean-weather-widget.bordered {
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
padding: 6px 12px;
}
.korean-weather-widget.semi-bg {
background: rgba(0, 0, 0, 0.1);
border-radius: 12px;
backdrop-filter: blur(4px);
}
.korean-weather-widget.dark-text {
color: #333;
}
.korean-weather-widget.dark-text .weather-temp,
.korean-weather-widget.dark-text .weather-condition,
.korean-weather-widget.dark-text .weather-date {
color: #333;
}
/* Dark mode adaptations for weather widget when used outside orange header */
html.dark .elementor-section .korean-weather-widget,
body.dark .elementor-section .korean-weather-widget {
color: var(--rover-text-primary);
}
html.dark .elementor-section .korean-weather-widget .weather-temp,
body.dark .elementor-section .korean-weather-widget .weather-temp,
html.dark .elementor-section .korean-weather-widget .weather-condition,
body.dark .elementor-section .korean-weather-widget .weather-condition,
html.dark .elementor-section .korean-weather-widget .weather-date,
body.dark .elementor-section .korean-weather-widget .weather-date {
color: var(--rover-text-primary);
}
html.dark .elementor-section .korean-weather-widget.dark-text,
body.dark .elementor-section .korean-weather-widget.dark-text {
color: var(--rover-text-primary);
}
html.dark .elementor-section .korean-weather-widget.dark-text .weather-temp,
html.dark .elementor-section .korean-weather-widget.dark-text .weather-condition,
html.dark .elementor-section .korean-weather-widget.dark-text .weather-date,
body.dark .elementor-section .korean-weather-widget.dark-text .weather-temp,
body.dark .elementor-section .korean-weather-widget.dark-text .weather-condition,
body.dark .elementor-section .korean-weather-widget.dark-text .weather-date {
color: var(--rover-text-primary);
}
/* ================================
LOOP GRID FIXES
================================ */
/* Loop grid containers */
.elementor-widget-loop-grid .elementor-loop-container {
background-color: transparent !important;
}
/* Loop grid items */
.elementor-widget-loop-grid .elementor-loop-container .elementor-post {
background-color: var(--rover-bg-surface) !important;
border: 1px solid var(--rover-border-light) !important;
border-radius: 6px !important;
transition: all 0.2s ease !important;
overflow: hidden !important;
}
.elementor-widget-loop-grid .elementor-loop-container .elementor-post:hover {
border-color: var(--rover-orange, #F87614) !important;
box-shadow: 0 2px 8px rgba(248, 118, 20, 0.1) !important;
}
html.dark .elementor-widget-loop-grid .elementor-loop-container .elementor-post:hover,
body.dark .elementor-widget-loop-grid .elementor-loop-container .elementor-post:hover {
border-color: var(--rover-orange, #F87614) !important;
box-shadow: 0 2px 8px rgba(255, 145, 66, 0.1) !important;
}
/* ================================
SECTION HEADINGS
================================ */
/* Specific headings on this page */
.elementor-element-7ee73183 .elementor-heading-title,
.elementor-element-58dec371 .elementor-heading-title {
font-size: 1.1em !important;
margin-bottom: 15px !important;
padding-bottom: 8px !important;
border-bottom: 2px solid var(--rover-orange, #F87614) !important;
color: var(--rover-text-primary) !important;
}
html.dark .elementor-element-7ee73183 .elementor-heading-title,
body.dark .elementor-element-7ee73183 .elementor-heading-title,
html.dark .elementor-element-58dec371 .elementor-heading-title,
body.dark .elementor-element-58dec371 .elementor-heading-title {
border-bottom-color: var(--rover-orange, #F87614) !important;
}
/* ================================
LINKS AND INTERACTIONS
================================ */
/* Article title link styling - force light mode colors by default */
.rover-mixed-grid__title,
.rover-people-stories__title-link,
.kp-featured__title a,
.kp-regular-item__title a,
.kp-opinion-item__title a,
.rover-featured__title a,
.rover-outlet-item__title a,
.rover-outlets-overview__post-title a,
.rover-headline-ticker__title a {
color: var(--rover-text-primary, #101010) !important;
text-decoration: none !important;
transition: color 0.2s ease;
}
.rover-mixed-grid__title:hover,
.rover-people-stories__title-link:hover,
.kp-featured__title a:hover,
.kp-regular-item__title a:hover,
.kp-opinion-item__title a:hover,
.rover-featured__title a:hover,
.rover-outlet-item__title a:hover,
.rover-outlets-overview__post-title a:hover,
.rover-headline-ticker__title a:hover {
color: var(--rover-light-gray, #606060) !important;
}
/* Dark mode using body.dark class - much better than prefers-color-scheme */
html.dark .rover-mixed-grid__title,
html.dark .rover-people-stories__title-link,
html.dark .kp-featured__title a,
html.dark .kp-regular-item__title a,
html.dark .kp-opinion-item__title a,
html.dark .rover-featured__title a,
html.dark .rover-outlet-item__title a,
html.dark .rover-outlets-overview__post-title a,
html.dark .rover-headline-ticker__title a,
body.dark .rover-mixed-grid__title,
body.dark .rover-people-stories__title-link,
body.dark .kp-featured__title a,
body.dark .kp-regular-item__title a,
body.dark .kp-opinion-item__title a,
body.dark .rover-featured__title a,
body.dark .rover-outlet-item__title a,
body.dark .rover-outlets-overview__post-title a,
body.dark .rover-headline-ticker__title a {
color: var(--rover-text-primary-dark, #e8eaed) !important;
}
html.dark .rover-mixed-grid__title:hover,
html.dark .rover-people-stories__title-link:hover,
html.dark .kp-featured__title a:hover,
html.dark .kp-regular-item__title a:hover,
html.dark .kp-opinion-item__title a:hover,
html.dark .rover-featured__title a:hover,
html.dark .rover-outlet-item__title a:hover,
html.dark .rover-outlets-overview__post-title a:hover,
html.dark .rover-headline-ticker__title a:hover,
body.dark .rover-mixed-grid__title:hover,
body.dark .rover-people-stories__title-link:hover,
body.dark .kp-featured__title a:hover,
body.dark .kp-regular-item__title a:hover,
body.dark .kp-opinion-item__title a:hover,
body.dark .rover-featured__title a:hover,
body.dark .rover-outlet-item__title a:hover,
body.dark .rover-outlets-overview__post-title a:hover,
body.dark .rover-headline-ticker__title a:hover {
color: var(--rover-accent-light, #8ab4f8) !important;
}
/* Keep orange styling for specific UI elements */
.weather-column__more,
.rover-mixed-grid__btn-portal,
.rover-people-stories__btn-portal,
.connect-account-button,
.elementor-button.rover-accent {
color: var(--rover-orange, #F87614) !important;
}
.weather-column__more:hover,
.connect-account-button:hover,
.elementor-button.rover-accent:hover {
color: var(--rover-orange-hover, #e66a12) !important;
}
/* ================================
RESPONSIVE MAIN PAGE FIXES
================================ */
/* Mobile adjustments */
@media (max-width: 768px) {
.elementor-container[data-id="69169b88"],
.elementor-container[data-id="6a79afbb"] {
padding: 15px !important;
}
.elementor-widget-taxonomy-filter .taxonomy-filter-item {
font-size: 0.9em !important;
padding: 0 8px 8px 8px !important;
}
.elementor-element-7ee73183 .elementor-heading-title,
.elementor-element-58dec371 .elementor-heading-title {
font-size: 1em !important;
}
}
@media (max-width: 480px) {
.elementor-container[data-id="69169b88"],
.elementor-container[data-id="6a79afbb"] {
padding: 10px !important;
}
/* Stack layout improvements */
.elementor-widget-loop-grid .elementor-loop-container {
gap: 8px !important;
}
.elementor-widget-loop-grid .elementor-post {
margin-bottom: 8px !important;
}
}
/* ================================
ROVER-SPECIFIC OUTLET TEMPLATES
================================ */
/* Container classes for handling backgrounds - Improved spacing */
.rover-container,
.rover-section-container,
.rover-grid-container {
background-color: transparent !important;
border-radius: 8px !important;
}
/* Remove padding from grid container to let content control spacing */
.rover-grid-container {
padding: 0 !important;
}
/* Content area container */
.rover-content-wrapper {
background-color: transparent !important;
}
/* Ensure all container backgrounds work properly in dark mode */
html.dark .rover-section-container,
body.dark .rover-section-container {
background-color: var(--rover-bg-surface, #1C1E21) !important;
}
/* Make sure all borders are removed in dark mode */
html.dark .rover-container,
html.dark .rover-section-container,
html.dark .rover-grid-container,
html.dark .rover-content-wrapper,
html.dark .rover-featured,
html.dark .rover-outlet-item,
html.dark .rover-mixed-grid__item,
html.dark .rover-headline-ticker,
body.dark .rover-container,
body.dark .rover-section-container,
body.dark .rover-grid-container,
body.dark .rover-content-wrapper,
body.dark .rover-featured,
body.dark .rover-outlet-item,
body.dark .rover-mixed-grid__item,
body.dark .rover-headline-ticker {
border: none !important;
}
/* Dark mode: containers transparent, individual cards get dark backgrounds */
html.dark .rover-content-wrapper,
html.dark .rover-grid-container,
html.dark .rover-outlets-overview,
html.dark .rover-mixed-grid,
html.dark .rover-outlets-overview__major,
html.dark .rover-outlets-overview__minor,
html.dark .rover-outlets-overview__major-grid,
html.dark .rover-outlets-overview__minor-grid,
html.dark .rover-mixed-grid__container,
body.dark .rover-content-wrapper,
body.dark .rover-grid-container,
body.dark .rover-outlets-overview,
body.dark .rover-mixed-grid,
body.dark .rover-outlets-overview__major,
body.dark .rover-outlets-overview__minor,
body.dark .rover-outlets-overview__major-grid,
body.dark .rover-outlets-overview__minor-grid,
body.dark .rover-mixed-grid__container {
background-color: transparent !important;
border: none !important;
}
/* Dark mode: individual cards get dark backgrounds */
html.dark .rover-outlet-item,
html.dark .rover-mixed-grid__item,
html.dark .rover-outlets-overview__outlet,
html.dark .rover-outlets-overview__post,
body.dark .rover-outlet-item,
body.dark .rover-mixed-grid__item,
body.dark .rover-outlets-overview__outlet,
body.dark .rover-outlets-overview__post {
background-color: var(--rover-bg-dark, #202124) !important;
border: 1px solid var(--rover-border-dark, #3c4043) !important;
}
/* Rover Featured Template */
.rover-featured {
background-color: transparent !important;
border: none !important;
border-radius: 8px !important;
overflow: hidden !important;
transition: all 0.2s ease !important;
}
.rover-featured__container {
display: flex !important;
gap: 10px !important;
padding: 0px !important;
}
.rover-featured__image {
flex: 0 0 50% !important;
}
.rover-featured__image img {
width: 100% !important;
height: 350px !important;
object-fit: cover !important;
border-radius: 6px !important;
}
.rover-featured__content {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
}
.rover-featured__outlet {
display: flex !important;
align-items: center !important;
gap: 8px !important;
margin-bottom: 8px !important;
}
.rover-featured__outlet-logo {
width: 20px !important;
height: 20px !important;
flex-shrink: 0 !important;
}
.rover-featured__outlet-logo svg {
width: 100% !important;
height: 100% !important;
}
.rover-featured__outlet-name {
font-size: 12px !important;
font-weight: 600 !important;
color: var(--rover-orange, #F87614) !important;
text-transform: uppercase !important;
}
html.dark .rover-featured__outlet-name,
body.dark .rover-featured__outlet-name {
color: var(--rover-white) !important;
}
.rover-featured__title {
font-size: 24px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
margin: 0 !important;
}
.rover-featured__title a {
color: var(--rover-text-primary) !important;
text-decoration: none !important;
transition: color 0.2s ease !important;
}
.rover-featured__title a:hover {
color: var(--rover-orange, #F87614) !important;
}
html.dark .rover-featured__title a:hover,
body.dark .rover-featured__title a:hover {
color: var(--rover-white) !important;
}
.rover-featured__excerpt p {
font-size: .9rem !important;
line-height: 1.6 !important;
color: var(--rover-text-secondary) !important;
margin: 0 !important;
}
.rover-featured__meta {
display: flex !important;
align-items: center !important;
gap: 5px !important;
font-size: 12px !important;
color: var(--rover-text-caption) !important;
margin-top: auto !important;
}
.rover-featured__time {
font-weight: 500 !important;
}
.rover-featured__source {
opacity: 0.8 !important;
}
/* Rover Outlet Section Template - Compact Naver-style boxes */
.rover-outlet-section {
background-color: var(--rover-bg-cards) !important;
border: 1px solid var(--rover-border-light) !important;
border-radius: 8px !important;
padding: 16px !important;
margin-bottom: 16px !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}
html.dark .rover-outlet-section,
body.dark .rover-outlet-section {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}
.rover-outlet-section__header {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
margin-bottom: 12px !important;
padding-bottom: 8px !important;
border-bottom: 2px solid var(--rover-orange, #F87614) !important;
}
html.dark .rover-outlet-section__header,
body.dark .rover-outlet-section__header {
border-bottom-color: var(--rover-white) !important;
}
.rover-outlet-section__title-section {
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
.rover-outlet-section__logo {
width: 20px !important;
height: 20px !important;
flex-shrink: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.rover-outlet-section__logo svg,
.rover-outlet-section__logo .outlet-logo {
width: 100% !important;
height: 100% !important;
max-width: 20px !important;
max-height: 20px !important;
object-fit: contain !important;
}
.rover-outlet-section__title {
font-size: 18px !important;
font-weight: 700 !important;
color: var(--rover-text-primary) !important;
margin: 0 !important;
}
.rover-outlet-section__more {
font-size: 14px !important;
font-weight: 500 !important;
color: var(--rover-text-secondary) !important;
text-decoration: none !important;
transition: all 0.2s ease !important;
}
.rover-outlet-section__more:hover {
color: var(--rover-blue-accent) !important;
}
html.dark .rover-outlet-section__more,
body.dark .rover-outlet-section__more {
color: var(--rover-text-secondary) !important;
}
html.dark .rover-outlet-section__more:hover,
body.dark .rover-outlet-section__more:hover {
color: var(--rover-blue-accent) !important;
}
.rover-outlet-section__arrow {
margin-left: 4px !important;
transition: transform 0.2s ease !important;
}
.rover-outlet-section__grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
gap: 12px !important;
}
.rover-outlet-item {
display: flex !important;
gap: 10px !important;
padding: 8px !important;
border: none !important;
border-radius: 4px !important;
background-color: transparent !important;
transition: all 0.2s ease !important;
}
.rover-outlet-item__image {
flex: 0 0 80px !important;
}
.rover-outlet-item__image img {
width: 100% !important;
height: 60px !important;
object-fit: cover !important;
border-radius: 4px !important;
}
.rover-outlet-item__content {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
min-width: 0 !important; /* Fix overflow */
overflow: hidden !important;
}
.rover-outlet-item__title {
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
margin: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
}
.rover-outlet-item__title a {
color: var(--rover-text-primary) !important;
text-decoration: none !important;
transition: color 0.2s ease !important;
}
.rover-outlet-item__title a:hover {
color: var(--rover-blue-accent) !important;
}
body.dark .rover-outlet-item__title a:hover {
color: var(--rover-blue-accent) !important;
}
.rover-outlet-item__excerpt {
font-size: 12px !important;
line-height: 1.5 !important;
color: var(--rover-text-secondary) !important;
margin: 0 !important;
}
.rover-outlet-item__meta {
display: flex !important;
align-items: center !important;
gap: 8px !important;
font-size: 11px !important;
color: var(--rover-text-caption) !important;
margin-top: auto !important;
}
.rover-outlet-item__time {
font-weight: 500 !important;
}
.rover-outlet-item__source {
opacity: 0.8 !important;
}
/* Rover Headline Ticker */
.rover-headline-ticker {
background-color: #ffffff !important;
border: none !important;
border-radius: 8px !important;
overflow: hidden !important;
}
html.dark .rover-headline-ticker,
body.dark .rover-headline-ticker {
background-color: var(--rover-bg-surface, #1C1E21) !important;
}
.rover-headline-ticker__container {
display: flex !important;
align-items: center !important;
height: 35px !important;
}
.rover-headline-ticker__label {
display: flex !important;
align-items: center !important;
gap: 6px !important;
padding: 0 16px !important;
background-color: var(--rover-orange, #F87614) !important;
color: white !important;
font-weight: 600 !important;
font-size: 13px !important;
flex-shrink: 0 !important;
height: 100% !important;
}
html.dark .rover-headline-ticker__label,
body.dark .rover-headline-ticker__label {
background-color: var(--rover-orange, #F87614) !important;
}
.rover-headline-ticker__icon {
font-size: 14px !important;
filter: none !important;
}
.rover-headline-ticker__content {
flex: 1 !important;
overflow: hidden !important;
height: 100% !important;
}
.rover-headline-ticker__track {
display: flex !important;
height: 100% !important;
animation: rover-ticker-scroll 30s linear infinite !important;
}
@keyframes rover-ticker-scroll {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
.rover-headline-ticker__item {
display: flex !important;
align-items: center !important;
white-space: nowrap !important;
padding: 0 20px !important;
height: 100% !important;
flex-shrink: 0 !important;
}
.rover-headline-ticker__link {
display: flex !important;
align-items: center !important;
gap: 8px !important;
color: var(--rover-text-primary) !important;
text-decoration: none !important;
font-size: 14px !important;
transition: color 0.2s ease !important;
}
.rover-headline-ticker__link:hover {
color: var(--rover-orange, #F87614) !important;
}
html.dark .rover-headline-ticker__link:hover,
body.dark .rover-headline-ticker__link:hover {
color: var(--rover-orange, #F87614) !important;
}
.rover-headline-ticker__source {
font-weight: 600 !important;
color: var(--rover-orange, #F87614) !important;
font-size: 12px !important;
}
html.dark .rover-headline-ticker__source,
body.dark .rover-headline-ticker__source {
color: var(--rover-orange, #F87614) !important;
}
.rover-headline-ticker__title {
font-weight: 500 !important;
}
.rover-headline-ticker__time {
font-size: 11px !important;
color: var(--rover-text-caption) !important;
font-weight: 400 !important;
}
.rover-headline-ticker__controls {
display: flex !important;
flex-shrink: 0 !important;
}
.rover-headline-ticker__prev,
.rover-headline-ticker__next {
width: 30px !important;
height: 50px !important;
border: none !important;
background-color: var(--rover-bg-surface) !important;
color: var(--rover-text-secondary) !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
font-size: 16px !important;
}
.rover-headline-ticker__prev:hover,
.rover-headline-ticker__next:hover {
background-color: var(--rover-orange, #F87614) !important;
color: white !important;
}
html.dark .rover-headline-ticker__prev:hover,
html.dark .rover-headline-ticker__next:hover,
body.dark .rover-headline-ticker__prev:hover,
body.dark .rover-headline-ticker__next:hover {
background-color: var(--rover-orange, #F87614) !important;
}
/* Rover Mixed Grid */
.rover-mixed-grid {
margin-bottom: 12px !important;
}
.rover-mixed-grid__container {
display: grid !important;
gap: 10px !important;
}
/* Default grid layout */
.rover-mixed-grid[data-layout="default"] .rover-mixed-grid__container {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
}
/* Hero layout */
.rover-mixed-grid[data-layout="hero"] .rover-mixed-grid__container {
grid-template-columns: 2fr 1fr !important;
grid-template-rows: auto auto !important;
}
.rover-mixed-grid__item--hero {
grid-column: 1 / 2 !important;
grid-row: 1 / 3 !important;
}
.rover-mixed-grid__item--featured {
grid-column: 2 / 3 !important;
}
/* Magazine layout */
.rover-mixed-grid[data-layout="magazine"] .rover-mixed-grid__container {
grid-template-columns: repeat(4, 1fr) !important;
}
.rover-mixed-grid__item--large {
grid-column: span 2 !important;
grid-row: span 2 !important;
}
.rover-mixed-grid__item--medium {
grid-column: span 2 !important;
}
.rover-mixed-grid__item--small {
grid-column: span 1 !important;
}
/* Mixed grid item styling - Card backgrounds with gaps */
.rover-mixed-grid__item {
background-color: var(--rover-bg-cards) !important;
border: 1px solid var(--rover-border-light) !important;
border-radius: 8px !important;
overflow: hidden !important;
transition: all 0.2s ease !important;
display: flex !important;
flex-direction: column !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}
.rover-mixed-grid__item:hover {
border-color: var(--rover-blue-accent) !important;
}
html.dark .rover-mixed-grid__item,
body.dark .rover-mixed-grid__item {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}
html.dark .rover-mixed-grid__item:hover,
body.dark .rover-mixed-grid__item:hover {
border-color: var(--rover-blue-accent) !important;
}
.rover-mixed-grid__image {
position: relative !important;
overflow: hidden !important;
}
html.dark .rover-mixed-grid__image,
body.dark .rover-mixed-grid__image {
position: relative !important;
overflow: hidden !important;
}
.rover-mixed-grid__item--hero .rover-mixed-grid__image img {
width: 100% !important;
height: 250px !important;
object-fit: cover !important;
}
.rover-mixed-grid__item--large .rover-mixed-grid__image img {
width: 100% !important;
height: 180px !important;
object-fit: cover !important;
}
.rover-mixed-grid__item--standard .rover-mixed-grid__image img,
.rover-mixed-grid__item--medium .rover-mixed-grid__image img,
.rover-mixed-grid__item--featured .rover-mixed-grid__image img {
width: 100% !important;
height: 140px !important;
object-fit: cover !important;
}
.rover-mixed-grid__item--small .rover-mixed-grid__image img,
.rover-mixed-grid__item--compact .rover-mixed-grid__image img {
width: 100% !important;
height: 100px !important;
object-fit: cover !important;
}
.rover-mixed-grid__outlet-badge {
position: absolute !important;
top: 8px !important;
left: 8px !important;
background-color: rgba(248, 118, 20, 0.9) !important;
color: white !important;
padding: 4px 8px !important;
border-radius: 4px !important;
font-size: 11px !important;
font-weight: 600 !important;
}
.rover-mixed-grid__outlet-link
html.dark .rover-mixed-grid__outlet-badge,
body.dark .rover-mixed-grid__outlet-badge {
background-color: rgba(255, 145, 66, 0.9) !important;
}
.rover-mixed-grid__content {
padding: 16px !important;
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
}
.rover-mixed-grid__category {
font-size: 11px !important;
font-weight: 600 !important;
color: var(--rover-green-accent) !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
}
html.dark .rover-mixed-grid__category,
body.dark .rover-mixed-grid__category
{
color: var(--rover-green-accent) !important;
}
.rover-mixed-grid__title {
font-size: 15px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
margin: 0 !important;
}
.rover-mixed-grid__title--large {
font-size: 20px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
}
.rover-mixed-grid__title a {
color: var(--rover-text-primary) !important;
text-decoration: none !important;
transition: color 0.2s ease !important;
}
.rover-mixed-grid__title a:hover {
color: var(--rover-blue-accent) !important;
}
html.dark .rover-mixed-grid__title a:hover,
body.dark .rover-mixed-grid__title a:hover {
color: var(--rover-blue-accent) !important;
}
.rover-mixed-grid__excerpt {
font-size: 13px !important;
line-height: 1.5 !important;
color: var(--rover-text-secondary) !important;
margin: 0 !important;
flex: 1 !important;
}
.rover-mixed-grid__meta {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
font-size: 11px !important;
color: var(--rover-text-caption) !important;
margin-top: auto !important;
gap: 8px !important;
}
.rover-mixed-grid__time,
.rover-mixed-grid__source {
font-weight: 500 !important;
}
.rover-mixed-grid__comments {
color: var(--rover-orange, #F87614) !important;
font-weight: 600 !important;
}
html.dark .rover-mixed-grid__comments,
body.dark .rover-mixed-grid__comments
{
color: var(--rover-orange, #F87614) !important;
}
/* Rover Outlets Overview */
.rover-outlets-overview {
margin-bottom: 16px !important;
}
.rover-outlets-overview__section-header {
margin-bottom: 16px !important;
}
.rover-outlets-overview__section-title {
font-size: 20px !important;
font-weight: 700 !important;
color: var(--rover-text-primary) !important;
margin: 0 0 20px 0 !important;
padding: 16px 20px 12px 20px !important;
border-bottom: 3px solid var(--rover-orange, #F87614) !important;
background: var(--rover-bg-surface, #FFFFFF) !important;
border-radius: 8px !important;
}
/* Dark mode: section titles get card backgrounds */
html.dark .rover-outlets-overview__section-title,
body.dark .rover-outlets-overview__section-title
{
background-color: var(--rover-bg-dark, #202124) !important;
border: 1px solid var(--rover-border-dark, #3c4043) !important;
border-bottom: 3px solid var(--rover-accent-light, #8ab4f8) !important;
color: var(--rover-text-primary-dark, #e8eaed) !important;
}
.rover-outlets-overview__major {
margin-bottom: 16px !important;
}
.rover-outlets-overview__major-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)) !important;
gap: 16px !important;
}
.rover-outlets-overview__minor-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
gap: 12px !important;
}
.rover-outlets-overview__outlet {
background-color: var(--rover-bg-cards) !important;
border: 1px solid var(--rover-border-light) !important;
border-radius: 8px !important;
padding: 16px !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
transition: all 0.2s ease !important;
}
.rover-outlets-overview__outlet:hover {
border-color: var(--rover-orange, #F87614) !important;
}
html.dark .rover-outlets-overview__outlet,
body.dark .rover-outlets-overview__outlet
{
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}
html.dark .rover-outlets-overview__outlet:hover,
body.dark .rover-outlets-overview__outlet:hover
{
box-shadow: 0 2px 8px rgba(255, 145, 66, 0.08) !important;
}
.rover-outlets-overview__outlet-header {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
margin-bottom: 12px !important;
padding-bottom: 8px !important;
border-bottom: 2px solid var(--rover-orange, #F87614) !important;
}
html.dark .rover-outlets-overview__outlet-header,
body.dark .rover-outlets-overview__outlet-header
{
border-bottom-color: var(--rover-white) !important;
}
.rover-outlets-overview__outlet-title-section {
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
.rover-outlets-overview__outlet-logo {
width: 24px !important;
height: 24px !important;
flex-shrink: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.rover-outlets-overview__outlet-logo svg,
.rover-outlets-overview__outlet-logo .outlet-logo {
width: 100% !important;
height: 100% !important;
max-width: 24px !important;
max-height: 24px !important;
object-fit: contain !important;
}
.rover-outlets-overview__outlet-title {
font-size: 16px !important;
font-weight: 700 !important;
color: var(--rover-text-primary) !important;
margin: 0 !important;
}
.rover-outlets-overview__outlet-more {
font-size: 13px !important;
font-weight: 500 !important;
color: var(--rover-text-secondary) !important;
text-decoration: none !important;
transition: all 0.2s ease !important;
}
.rover-outlets-overview__outlet-more:hover {
color: var(--rover-blue-accent) !important;
}
html.dark .rover-outlets-overview__outlet-more,
body.dark .rover-outlets-overview__outlet-more
{
color: var(--rover-text-secondary) !important;
}
html.dark .rover-outlets-overview__outlet-more:hover,
body.dark .rover-outlets-overview__outlet-more:hover
{
color: var(--rover-blue-accent) !important;
}
.rover-outlets-overview__post-meta {
line-height: 12px !important;
}
.rover-outlets-overview__post-time {
font-size: 12px !important;
font-weight: 400 !important;
color: var(--rover-light-gray, #606060) !important;
}
html.dark .rover-outlets-overview__post-time,
body.dark .rover-outlets-overview__post-time {
color: var(--rover-light-gray, #606060) !important;
}
.rover-outlets-overview__post-category {
font-size: 12px !important;
font-weight: 400 !important;
color: var(--rover-orange, #F87614) !important;
}
html.dark .rover-outlets-overview__post-category,
body.dark .rover-outlets-overview__post-category {
color: var(--rover-orange, #F87614) !important;
}
/* ================================
ROVER PEOPLE STORIES (OPINION FEED)
================================ */
.rover-people-stories {
margin-bottom: 16px !important;
}
.rover-people-stories__header {
text-align: center !important;
margin-bottom: 12px !important;
padding-bottom: 16px !important;
border-bottom: 3px solid var(--rover-orange, #F87614) !important;
}
html.dark .rover-people-stories__header,
body.dark .rover-people-stories__header {
border-bottom-color: var(--rover-white) !important;
}
.rover-people-stories__title {
font-size: 24px !important;
font-weight: 700 !important;
color: var(--rover-text-primary) !important;
margin: 0 0 8px 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
}
.rover-people-stories__icon {
font-size: 28px !important;
}
.rover-people-stories__subtitle {
font-size: 14px !important;
color: var(--rover-text-secondary) !important;
font-weight: 400 !important;
}
.rover-people-stories__grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
gap: 16px !important;
}
.rover-people-stories__item {
background-color: var(--rover-bg-cards) !important;
border: 1px solid var(--rover-border-light) !important;
border-radius: 8px !important;
overflow: hidden !important;
transition: all 0.2s ease !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}
.rover-people-stories__item:hover {
border-color: var(--rover-orange, #F87614) !important;
box-shadow: 0 4px 12px rgba(248, 118, 20, 0.1) !important;
}
html.dark .rover-people-stories__item,
body.dark .rover-people-stories__item {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}
html.dark .rover-people-stories__item:hover,
body.dark .rover-people-stories__item:hover {
box-shadow: 0 4px 12px rgba(255, 145, 66, 0.1) !important;
}
.rover-people-stories__image {
position: relative !important;
overflow: hidden !important;
}
.rover-people-stories__image img {
width: 100% !important;
height: 180px !important;
object-fit: cover !important;
transition: transform 0.2s ease !important;
}
.rover-people-stories__item:hover .rover-people-stories__image img {
transform: scale(1.05) !important;
}
.rover-people-stories__outlet-badge {
position: absolute !important;
top: 8px !important;
right: 8px !important;
background-color: rgba(248, 118, 20, 0.9) !important;
color: white !important;
padding: 4px 8px !important;
border-radius: 4px !important;
font-size: 11px !important;
font-weight: 600 !important;
backdrop-filter: blur(4px) !important;
}
html.dark .rover-people-stories__outlet-badge,
body.dark .rover-people-stories__outlet-badge {
background-color: rgba(255, 145, 66, 0.9) !important;
}
.rover-people-stories__content {
padding: 16px !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
}
.rover-people-stories__title-link {
font-size: 16px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
margin: 0 !important;
overflow: hidden !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
}
.rover-people-stories__title-link a {
color: var(--rover-text-primary) !important;
text-decoration: none !important;
transition: color 0.2s ease !important;
}
.rover-people-stories__title-link a:hover {
color: var(--rover-blue-accent) !important;
}
body.dark .rover-people-stories__title-link a:hover {
color: var(--rover-blue-accent) !important;
}
.rover-people-stories__excerpt {
font-size: 14px !important;
line-height: 1.5 !important;
color: var(--rover-text-secondary) !important;
margin: 0 !important;
overflow: hidden !important;
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
}
.rover-people-stories__meta {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
font-size: 12px !important;
color: var(--rover-text-caption) !important;
margin-top: auto !important;
gap: 8px !important;
flex-wrap: wrap !important;
}
.rover-people-stories__time,
.rover-people-stories__source {
font-weight: 500 !important;
}
.rover-people-stories__category {
background-color: var(--rover-blue-accent) !important;
color: white !important;
padding: 2px 6px !important;
border-radius: 3px !important;
font-size: 10px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
}
body.dark .rover-people-stories__category {
background-color: var(--rover-blue-accent) !important;
}
.rover-people-stories__more-section {
text-align: center !important;
margin-top: 24px !important;
}
.rover-people-stories__load-more {
background-color: var(--rover-orange, #F87614) !important;
color: white !important;
border: none !important;
padding: 12px 24px !important;
border-radius: 6px !important;
font-size: 14px !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
}
.rover-people-stories__load-more:hover {
background-color: var(--rover-orange-hover) !important;
}
/* ================================
RESPONSIVE STYLES FOR ROVER
================================ */
@media (max-width: 768px) {
/* Mobile column overrides for rover-mixed-grid */
.rover-mixed-grid--mobile-columns-1 .rover-mixed-grid__container {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
.rover-mixed-grid--mobile-columns-2 .rover-mixed-grid__container {
grid-template-columns: repeat(2, 1fr) !important;
gap: 12px !important;
}
.rover-mixed-grid--mobile-columns-3 .rover-mixed-grid__container {
grid-template-columns: repeat(3, 1fr) !important;
gap: 10px !important;
}
.rover-mixed-grid--mobile-columns-4 .rover-mixed-grid__container {
grid-template-columns: repeat(4, 1fr) !important;
gap: 8px !important;
}
/* Reset all special grid layouts on mobile when mobile_columns is specified */
.rover-mixed-grid--mobile-columns-1 .rover-mixed-grid__item,
.rover-mixed-grid--mobile-columns-2 .rover-mixed-grid__item,
.rover-mixed-grid--mobile-columns-3 .rover-mixed-grid__item,
.rover-mixed-grid--mobile-columns-4 .rover-mixed-grid__item {
grid-column: auto !important;
grid-row: auto !important;
}
/* Adjust content sizing for different mobile column counts */
.rover-mixed-grid--mobile-columns-3 .rover-mixed-grid__item--standard .rover-mixed-grid__image img,
.rover-mixed-grid--mobile-columns-3 .rover-mixed-grid__item--medium .rover-mixed-grid__image img,
.rover-mixed-grid--mobile-columns-3 .rover-mixed-grid__item--featured .rover-mixed-grid__image img,
.rover-mixed-grid--mobile-columns-4 .rover-mixed-grid__item--standard .rover-mixed-grid__image img,
.rover-mixed-grid--mobile-columns-4 .rover-mixed-grid__item--medium .rover-mixed-grid__image img,
.rover-mixed-grid--mobile-columns-4 .rover-mixed-grid__item--featured .rover-mixed-grid__image img {
height: 100px !important;
}
.rover-mixed-grid--mobile-columns-3 .rover-mixed-grid__title,
.rover-mixed-grid--mobile-columns-4 .rover-mixed-grid__title {
font-size: 13px !important;
}
.rover-mixed-grid--mobile-columns-4 .rover-mixed-grid__content {
padding: 12px !important;
gap: 6px !important;
}
.rover-mixed-grid--mobile-columns-3 .rover-mixed-grid__meta,
.rover-mixed-grid--mobile-columns-4 .rover-mixed-grid__meta {
font-size: 10px !important;
}
.rover-featured__container {
flex-direction: column !important;
gap: 16px !important;
padding: 16px !important;
}
.rover-featured__image {
flex: none !important;
}
.rover-featured__title {
font-size: 20px !important;
}
.rover-outlet-section__grid {
grid-template-columns: 1fr !important;
}
.rover-mixed-grid[data-layout="hero"] .rover-mixed-grid__container,
.rover-mixed-grid[data-layout="magazine"] .rover-mixed-grid__container {
grid-template-columns: 1fr !important;
}
.rover-mixed-grid__item--hero,
.rover-mixed-grid__item--large,
.rover-mixed-grid__item--medium,
.rover-mixed-grid__item--small {
grid-column: 1 !important;
grid-row: auto !important;
}
.rover-outlets-overview__major-grid,
.rover-outlets-overview__minor-grid {
grid-template-columns: 1fr !important;
}
/* Mobile column overrides for rover-people-stories */
.rover-people-stories--mobile-columns-1 .rover-people-stories__grid {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
.rover-people-stories--mobile-columns-2 .rover-people-stories__grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 12px !important;
}
.rover-people-stories--mobile-columns-3 .rover-people-stories__grid {
grid-template-columns: repeat(3, 1fr) !important;
gap: 10px !important;
}
.rover-people-stories--mobile-columns-4 .rover-people-stories__grid {
grid-template-columns: repeat(4, 1fr) !important;
gap: 8px !important;
}
/* Fallback for existing behavior when no mobile_columns specified */
.rover-people-stories:not([class*="mobile-columns"]) .rover-people-stories__grid {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
.rover-people-stories__title {
font-size: 20px !important;
}
/* Adjust content sizing for different mobile column counts */
.rover-people-stories--mobile-columns-3 .rover-people-stories__image img,
.rover-people-stories--mobile-columns-4 .rover-people-stories__image img {
height: 120px !important;
}
.rover-people-stories--mobile-columns-3 .rover-people-stories__title-link,
.rover-people-stories--mobile-columns-4 .rover-people-stories__title-link {
font-size: 14px !important;
-webkit-line-clamp: 2 !important;
}
.rover-people-stories--mobile-columns-3 .rover-people-stories__excerpt,
.rover-people-stories--mobile-columns-4 .rover-people-stories__excerpt {
font-size: 12px !important;
-webkit-line-clamp: 2 !important;
}
.rover-people-stories--mobile-columns-3 .rover-people-stories__meta,
.rover-people-stories--mobile-columns-4 .rover-people-stories__meta {
font-size: 10px !important;
}
.rover-people-stories--mobile-columns-4 .rover-people-stories__content {
padding: 12px !important;
gap: 6px !important;
}
.rover-headline-ticker__container {
height: 60px !important;
}
.rover-headline-ticker__label {
padding: 0 12px !important;
font-size: 12px !important;
}
}
@media (max-width: 480px) {
.rover-outlet-item {
flex-direction: column !important;
gap: 8px !important;
}
.rover-outlet-item__image {
flex: none !important;
align-self: stretch !important;
}
.rover-outlet-item__image img {
width: 100% !important;
height: 120px !important;
}
.rover-featured__title {
font-size: 18px !important;
}
.rover-mixed-grid__title--large {
font-size: 18px !important;
}
.rover-people-stories__grid {
gap: 10px !important;
}
.rover-people-stories__image img {
height: 150px !important;
}
.rover-people-stories__title {
font-size: 18px !important;
}
.rover-people-stories__content {
padding: 12px !important;
}
}
/* ================================
PERFORMANCE AND TRANSITIONS
================================ */
/* Smooth transitions for all interactive elements */
.elementor-container,
.elementor-widget-container,
.elementor-post {
transition: all 0.2s ease !important;
}
/* Ensure images in posts load smoothly */
.elementor-post img {
transition: opacity 0.3s ease !important;
}
/* Fix any z-index issues */
.elementor-widget-taxonomy-filter {
position: relative !important;
z-index: 10 !important;
}
.korean-sports-static {
position: relative !important;
z-index: 5 !important;
}
/* ================================
WEATHER & BASEBALL WIDGETS
================================ */
/* Naver Weather & Baseball Style - Transparent Single Line for Orange Header */
/* ===== WEATHER WIDGET ===== */
.korean-weather-widget {
background: transparent;
border: none;
border-radius: 0;
padding: 8px 12px;
margin: 0;
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'Noto Sans KR', sans-serif;
font-size: 14px;
color: white;
white-space: nowrap;
height: auto;
max-width: none;
text-align: left;
box-shadow: none;
transition: opacity 0.2s ease;
}
.korean-weather-widget:hover {
opacity: 0.8;
transform: none;
}
/* Weather Icon */
.korean-weather-widget .weather-icon {
font-size: 18px;
margin: 0;
display: inline-block;
line-height: 1;
filter: none;
flex-shrink: 0;
}
/* Temperature */
.korean-weather-widget .weather-temp {
font-size: 16px;
font-weight: 500;
margin: 0;
line-height: 1;
color: white;
flex-shrink: 0;
}
/* Condition */
.korean-weather-widget .weather-condition {
font-size: 13px;
font-weight: 500;
margin: 0;
opacity: 0.9;
color: white;
flex-shrink: 0;
}
/* Date */
.korean-weather-widget .weather-date {
font-size: 13px;
font-weight: 500;
opacity: 0.8;
color: white;
margin: 0;
border: none;
padding: 0;
flex-shrink: 0;
}
/* Compact variant */
.korean-weather-widget.compact {
padding: 6px 10px;
gap: 6px;
}
.korean-weather-widget.compact .weather-icon {
font-size: 16px;
}
.korean-weather-widget.compact .weather-temp {
font-size: 14px;
}
.korean-weather-widget.compact .weather-condition {
font-size: 12px;
}
/* Icon-only variant */
.korean-weather-widget.icon-only {
padding: 6px 8px;
gap: 0;
}
.korean-weather-widget.icon-only .weather-icon {
font-size: 18px;
}
.korean-weather-widget.icon-only .weather-temp,
.korean-weather-widget.icon-only .weather-condition,
.korean-weather-widget.icon-only .weather-date {
display: none;
}
/* Minimal variant (icon + temp + date) */
.korean-weather-widget.minimal {
padding: 6px 10px;
gap: 6px;
}
.korean-weather-widget.minimal .weather-condition {
display: none;
}
/* Divider between elements */
.korean-weather-widget.with-dividers .weather-temp::after,
.korean-weather-widget.with-dividers .weather-condition::after {
content: "·";
margin-left: 6px;
opacity: 0.5;
}
/* Optional styling variants */
.korean-weather-widget.bordered {
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
padding: 6px 12px;
}
.korean-weather-widget.semi-bg {
background: rgba(0, 0, 0, 0.1);
border-radius: 12px;
backdrop-filter: blur(4px);
}
.korean-weather-widget.dark-text {
color: #333;
}
.korean-weather-widget.dark-text .weather-temp,
.korean-weather-widget.dark-text .weather-condition,
.korean-weather-widget.dark-text .weather-date {
color: #333;
}
/* ===== ROVER WEATHER WIDGET - 웨더오어낫 BRANDED ===== */
/* ROVER Weather Widget - Compact sidebar/card style */
.korean-weather-widget.rover {
background: linear-gradient(135deg, var(--rover-blue-primary) 0%, var(--rover-blue-accent) 100%) !important;
border-radius: 12px !important;
padding: 16px !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif !important;
color: white !important;
box-shadow: 0 4px 16px rgba(59, 130, 246, 0.2) !important;
transition: all 0.3s ease !important;
position: relative !important;
overflow: hidden !important;
min-width: 200px !important;
}
.korean-weather-widget.rover:hover {
transform: translateY(-2px) !important;
box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3) !important;
}
/* Provider branding header */
.korean-weather-widget.rover .weather-provider {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
font-size: 11px !important;
font-weight: 500 !important;
opacity: 0.9 !important;
margin-bottom: 4px !important;
}
.korean-weather-widget.rover .weather-provider .provider-name {
display: flex !important;
align-items: center !important;
gap: 6px !important;
}
.korean-weather-widget.rover .weather-provider .provider-logo {
width: 16px !important;
height: 16px !important;
opacity: 0.8 !important;
filter: brightness(0) invert(1) !important;
}
.korean-weather-widget.rover .weather-provider .rover-badge {
font-size: 9px !important;
padding: 2px 6px !important;
background: rgba(255, 255, 255, 0.2) !important;
border-radius: 8px !important;
font-weight: 600 !important;
letter-spacing: 0.5px !important;
}
/* Main weather display */
.korean-weather-widget.rover .weather-main {
display: flex !important;
align-items: center !important;
gap: 12px !important;
}
.korean-weather-widget.rover .weather-icon {
font-size: 32px !important;
line-height: 1 !important;
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2)) !important;
flex-shrink: 0 !important;
}
.korean-weather-widget.rover .weather-info {
flex: 1 !important;
}
.korean-weather-widget.rover .weather-temp {
font-size: 24px !important;
font-weight: 700 !important;
line-height: 1 !important;
margin: 0 0 4px 0 !important;
color: white !important;
}
.korean-weather-widget.rover .weather-condition {
font-size: 13px !important;
font-weight: 500 !important;
opacity: 0.9 !important;
margin: 0 !important;
color: white !important;
}
/* Location and date footer */
.korean-weather-widget.rover .weather-footer {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
font-size: 11px !important;
opacity: 0.8 !important;
padding-top: 8px !important;
border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
}
.korean-weather-widget.rover .weather-location {
font-weight: 500 !important;
}
.korean-weather-widget.rover .weather-date {
font-weight: 400 !important;
}
/* Mobile horizontal layout */
@media (max-width: 768px) {
.korean-weather-widget.rover.mobile-horizontal {
flex-direction: row !important;
align-items: center !important;
padding: 12px 16px !important;
min-width: auto !important;
width: 100% !important;
}
.korean-weather-widget.rover.mobile-horizontal .weather-provider {
position: absolute !important;
top: 4px !important;
right: 8px !important;
margin-bottom: 0 !important;
}
.korean-weather-widget.rover.mobile-horizontal .weather-provider .rover-badge {
display: none !important;
}
.korean-weather-widget.rover.mobile-horizontal .weather-main {
flex: 1 !important;
gap: 16px !important;
}
.korean-weather-widget.rover.mobile-horizontal .weather-icon {
font-size: 28px !important;
}
.korean-weather-widget.rover.mobile-horizontal .weather-temp {
font-size: 20px !important;
}
.korean-weather-widget.rover.mobile-horizontal .weather-footer {
border: none !important;
padding: 0 !important;
flex-direction: column !important;
align-items: flex-end !important;
gap: 2px !important;
margin-left: 12px !important;
}
}
/* Compact variant for smaller spaces */
.korean-weather-widget.rover.compact {
padding: 12px !important;
gap: 8px !important;
min-width: 160px !important;
}
.korean-weather-widget.rover.compact .weather-icon {
font-size: 24px !important;
}
.korean-weather-widget.rover.compact .weather-temp {
font-size: 18px !important;
}
.korean-weather-widget.rover.compact .weather-condition {
font-size: 12px !important;
}
/* Dark mode adaptations */
body.dark .korean-weather-widget.rover {
background: linear-gradient(135deg, var(--rover-bg-cards) 0%, var(--rover-bg-surface) 100%) !important;
border: 1px solid var(--rover-border-medium) !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}
body.dark .korean-weather-widget.rover:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}
body.dark .korean-weather-widget.rover .weather-provider .rover-badge {
background: rgba(59, 130, 246, 0.3) !important;
}
/* ===== BASEBALL WIDGET STYLES ===== */
/* Baseball scores can use similar styling to weather widget */
.korean-baseball-widget {
background: transparent;
border: none;
border-radius: 0;
padding: 8px 12px;
margin: 0;
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'Noto Sans KR', sans-serif;
font-size: 14px;
color: white;
white-space: nowrap;
height: auto;
max-width: none;
text-align: left;
box-shadow: none;
transition: opacity 0.2s ease;
}
.korean-baseball-widget:hover {
opacity: 0.8;
transform: none;
}
.korean-baseball-widget .baseball-icon {
font-size: 16px;
margin: 0;
display: inline-block;
line-height: 1;
flex-shrink: 0;
}
.korean-baseball-widget .baseball-score {
font-size: 14px;
font-weight: 500;
margin: 0;
line-height: 1;
color: white;
flex-shrink: 0;
}
.korean-baseball-widget .baseball-teams {
font-size: 13px;
font-weight: 500;
margin: 0;
opacity: 0.9;
color: white;
flex-shrink: 0;
}
.korean-baseball-widget.compact {
padding: 6px 10px;
gap: 6px;
}
/* ===== DARK MODE SUPPORT FOR WIDGETS ===== */
/* Weather Widget Dark Mode */
html.dark .korean-weather-widget,
body.dark .korean-weather-widget {
color: var(--rover-text-primary);
}
html.dark .korean-weather-widget .weather-temp,
html.dark .korean-weather-widget .weather-condition,
html.dark .korean-weather-widget .weather-date,
body.dark .korean-weather-widget .weather-temp,
body.dark .korean-weather-widget .weather-condition,
body.dark .korean-weather-widget .weather-date {
color: var(--rover-text-primary);
}
html.dark .korean-weather-widget.dark-text,
body.dark .korean-weather-widget.dark-text {
color: var(--rover-text-primary);
}
html.dark .korean-weather-widget.dark-text .weather-temp,
html.dark .korean-weather-widget.dark-text .weather-condition,
html.dark .korean-weather-widget.dark-text .weather-date,
body.dark .korean-weather-widget.dark-text .weather-temp,
body.dark .korean-weather-widget.dark-text .weather-condition,
body.dark .korean-weather-widget.dark-text .weather-date {
color: var(--rover-text-primary);
}
html.dark .korean-weather-widget.bordered,
body.dark .korean-weather-widget.bordered {
border: 1px solid var(--rover-border-medium);
}
html.dark .korean-weather-widget.semi-bg,
body.dark .korean-weather-widget.semi-bg {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(4px);
}
/* Baseball Widget Dark Mode */
html.dark .korean-baseball-widget,
body.dark .korean-baseball-widget {
color: var(--rover-text-primary);
}
html.dark .korean-baseball-widget .baseball-score,
html.dark .korean-baseball-widget .baseball-teams,
body.dark .korean-baseball-widget .baseball-score,
body.dark .korean-baseball-widget .baseball-teams {
color: var(--rover-text-primary);
}
html.dark .korean-baseball-widget.bordered,
body.dark .korean-baseball-widget.bordered {
border: 1px solid var(--rover-border-medium);
}
html.dark .korean-baseball-widget.semi-bg,
body.dark .korean-baseball-widget.semi-bg {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(4px);
}
/* ===== LIGHT MODE ALTERNATIVES FOR NON-HEADER USAGE ===== */
/* For when widgets are used outside of orange header */
.korean-weather-widget.light-mode {
color: var(--rover-text-primary);
}
.korean-weather-widget.light-mode .weather-temp,
.korean-weather-widget.light-mode .weather-condition,
.korean-weather-widget.light-mode .weather-date {
color: var(--rover-text-primary);
}
.korean-weather-widget.light-mode.bordered {
border: 1px solid var(--rover-border-medium);
}
.korean-weather-widget.light-mode.semi-bg {
background: var(--rover-bg-surface);
border: 1px solid var(--rover-border-light);
}
.korean-baseball-widget.light-mode {
color: var(--rover-text-primary);
}
.korean-baseball-widget.light-mode .baseball-score,
.korean-baseball-widget.light-mode .baseball-teams {
color: var(--rover-text-primary);
}
.korean-baseball-widget.light-mode.bordered {
border: 1px solid var(--rover-border-medium);
}
.korean-baseball-widget.light-mode.semi-bg {
background: var(--rover-bg-surface);
border: 1px solid var(--rover-border-light);
}
/* ===== COMPREHENSIVE DARK MODE OVERRIDES ===== */
/* Consistent dark mode hover effects for rover components */
html.dark .rover-mixed-grid__item:hover,
html.dark .rover-outlets-overview__outlet:hover,
body.dark .rover-mixed-grid__item:hover,
body.dark .rover-outlets-overview__outlet:hover {
border-color: var(--rover-accent-light, #8ab4f8) !important;
}
/* Container background enforcement for dark mode */
html.dark .rover-container,
body.dark .rover-container {
background-color: transparent !important;
}
/* ================================
OUTLET BADGE SHORTCODE
================================ */
.outlet-badge {
display: inline-flex;
align-items: center;
gap: 6px;
vertical-align: middle;
font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
}
/* Badge style (default) - Off-white background with colored favicon */
.outlet-badge--badge {
background: var(--e-global-color-c6eb9e4, #F8F9FA);
color: var(--rover-text-primary, #101010);
padding: 6px 10px;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
border: 1px solid var(--rover-border-light, rgba(0,0,0,0.08));
transition: all 0.2s ease;
}
.outlet-badge--badge .outlet-badge__logo {
/* Keep original colors - no filter applied for colored favicons */
filter: none;
}
/* Minimal style */
.outlet-badge--minimal {
background: transparent;
color: var(--rover-text-secondary, #666);
padding: 2px 4px;
font-size: 12px;
font-weight: 500;
}
/* Outline style */
.outlet-badge--outline {
background: transparent;
border: 1px solid var(--rover-orange, #F87614);
color: var(--rover-orange, #F87614);
padding: 3px 7px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
}
/* Size variations */
.outlet-badge--small {
font-size: 10px;
}
.outlet-badge--small .outlet-badge__logo {
width: 16px;
height: 16px;
}
.outlet-badge--medium {
font-size: 12px;
}
.outlet-badge--medium .outlet-badge__logo {
width: 20px;
height: 20px;
}
.outlet-badge--large {
font-size: 14px;
padding: 6px 12px;
}
.outlet-badge--large .outlet-badge__logo {
width: 24px;
height: 24px;
}
/* Logo styling */
.outlet-badge__logo {
width: 20px;
height: 20px;
object-fit: contain;
flex-shrink: 0;
}
.outlet-badge__name {
white-space: nowrap;
}
/* Dark mode adjustments */
html.dark .outlet-badge--badge,
body.dark .outlet-badge--badge {
background: var(--rover-bg-surface, #FFFFFF);
color: var(--rover-text-primary, #101010);
border-color: var(--rover-border-light, rgba(0,0,0,0.08));
}
html.dark .outlet-badge--minimal,
body.dark .outlet-badge--minimal {
color: var(--rover-text-secondary-dark, #9aa0a6);
}
html.dark .outlet-badge--outline,
body.dark .outlet-badge--outline {
border-color: var(--rover-accent-light, #8ab4f8);
color: var(--rover-accent-light, #8ab4f8);
}
/* Hover effects */
.outlet-badge--badge:hover {
background: var(--rover-border-light, rgba(0,0,0,0.04));
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
border-color: var(--rover-border-light, rgba(0,0,0,0.12));
}
.outlet-badge--outline:hover {
background: var(--rover-orange, #F87614);
color: white;
}
.outlet-badge--outline:hover .outlet-badge__logo {
filter: brightness(0) invert(1);
}
html.dark .outlet-badge--outline:hover,
body.dark .outlet-badge--outline:hover {
background: var(--rover-accent-light, #8ab4f8);
color: var(--rover-bg-dark, #202124);
}
html.dark .outlet-badge--badge:hover,
body.dark .outlet-badge--badge:hover {
background: var(--rover-bg-surface, #FFFFFF);
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
html.dark .outlet-badge--outline:hover .outlet-badge__logo,
body.dark .outlet-badge--outline:hover .outlet-badge__logo {
filter: brightness(0);
}
/* ================================
ROVER RELATED ARTICLES
================================ */
.rover-related-articles {
width: 100%;
max-width: 100%;
margin: 0 auto 24px auto;
}
.rover-related-articles__header {
margin-bottom: 10px;
padding: 12px;
background-color: var(--rover-bg-surface, #FFFFFF);
border-radius: 8px;
border-bottom: 2px solid var(--rover-orange, #F87614);
}
html.dark .rover-related-articles__header,
body.dark .rover-related-articles__header {
background-color: var(--rover-bg-surface, #1c1E21);
border-bottom: 2px solid var(--rover-orange, #F87614);
}
.rover-related-articles__title {
font-size: 18px;
font-weight: 700;
color: var(--rover-text-primary, #101010);
margin: 0;
font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
}
.rover-related-articles__grid {
display: grid;
gap: 10px;
width: 100%;
}
/* Column variations */
.rover-related-articles--columns-1 .rover-related-articles__grid {
grid-template-columns: 1fr;
}
.rover-related-articles--columns-2 .rover-related-articles__grid {
grid-template-columns: repeat(2, 1fr);
}
.rover-related-articles--columns-3 .rover-related-articles__grid {
grid-template-columns: repeat(3, 1fr);
}
.rover-related-articles--columns-4 .rover-related-articles__grid {
grid-template-columns: repeat(4, 1fr);
}
.rover-related-articles__item {
position: relative;
background: #fff;
border: 1px solid #e1e5e9;
border-radius: 8px;
overflow: hidden;
transition: all 0.2s ease;
display: flex;
flex-direction: column;
height: 100%;
}
.rover-related-articles__item:hover {
border-color: var(--rover-blue-accent, #3B82F6);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}
.rover-related-articles__link {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
text-decoration: none;
}
.rover-related-articles__image {
width: 100%;
height: 120px;
overflow: hidden;
flex-shrink: 0;
}
.rover-related-articles__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.2s ease;
}
.rover-related-articles__item:hover .rover-related-articles__image img {
transform: scale(1.05);
}
.rover-related-articles__content {
padding: 12px;
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: space-between;
}
.rover-related-articles__item-title {
font-size: 14px;
font-weight: 600;
line-height: 1.3;
color: var(--rover-text-primary, #101010);
margin: 0 0 8px 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
}
body .rover-related-articles__excerpt {
flex-grow: 1;
margin-bottom: 8px;
}
body .rover-related-articles__excerpt p {
font-size: .9rem;
line-height: 1.2rem;
color: var(--rover-text-secondary, #666);
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.rover-related-articles__meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font-size: 11px;
color: var(--rover-text-caption, #888);
margin-top: auto;
}
.rover-related-articles__time {
font-weight: 500;
}
.rover-related-articles__source {
font-weight: 600;
color: var(--rover-orange, #F87614);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Empty state */
.rover-related-articles--empty {
padding: 24px;
text-align: center;
color: var(--rover-text-secondary, #666);
font-style: italic;
background: #f8f9fa;
border-radius: 8px;
border: 1px dashed #e1e5e9;
}
/* Dark mode */
html.dark .rover-related-articles__title,
body.dark .rover-related-articles__title {
color: var(--rover-text-primary-dark, #e8eaed);
}
html.dark .rover-related-articles__header,
body.dark .rover-related-articles__header {
border-bottom-color: var(--rover-white, #FFF);
}
html.dark .rover-related-articles__item,
body.dark .rover-related-articles__item {
background: var(--rover-bg-dark, #202124);
border-color: var(--rover-border-dark, #3c4043);
}
html.dark .rover-related-articles__item:hover,
body.dark .rover-related-articles__item:hover {
border-color: var(--rover-white, #FFF);
box-shadow: 0 4px 12px rgba(138, 180, 248, 0.15);
}
html.dark .rover-related-articles__item-title,
body.dark .rover-related-articles__item-title {
color: var(--rover-text-primary-dark, #e8eaed);
}
html.dark .rover-related-articles__excerpt p,
body.dark .rover-related-articles__excerpt p {
color: var(--rover-text-secondary-dark, #9aa0a6);
}
html.dark .rover-related-articles__meta,
body.dark .rover-related-articles__meta {
color: var(--rover-text-caption-dark, #8ab4f8);
}
html.dark .rover-related-articles__source,
body.dark .rover-related-articles__source {
color: var(--rover-accent-light, #8ab4f8);
}
html.dark .rover-related-articles--empty,
body.dark .rover-related-articles--empty {
background: var(--rover-bg-dark, #202124);
border-color: var(--rover-border-dark, #3c4043);
color: var(--rover-text-secondary-dark, #9aa0a6);
}
/* Responsive behavior with mobile column support */
@media (max-width: 768px) {
/* Mobile column overrides for tablet */
.rover-related-articles--mobile-columns-1 .rover-related-articles__grid {
grid-template-columns: 1fr !important;
}
.rover-related-articles--mobile-columns-2 .rover-related-articles__grid {
grid-template-columns: repeat(2, 1fr) !important;
}
.rover-related-articles--mobile-columns-3 .rover-related-articles__grid {
grid-template-columns: repeat(3, 1fr) !important;
}
.rover-related-articles--mobile-columns-4 .rover-related-articles__grid {
grid-template-columns: repeat(4, 1fr) !important;
}
/* Fallback for existing behavior when no mobile_columns specified */
.rover-related-articles:not([class*="mobile-columns"]).rover-related-articles--columns-3 .rover-related-articles__grid,
.rover-related-articles:not([class*="mobile-columns"]).rover-related-articles--columns-4 .rover-related-articles__grid {
grid-template-columns: repeat(2, 1fr);
}
.rover-related-articles__image {
height: 100px;
}
.rover-related-articles__item-title {
font-size: 13px;
}
.rover-related-articles__excerpt p {
font-size: 11px;
}
.rover-related-articles__meta {
font-size: 10px;
}
}
@media (max-width: 480px) {
/* Mobile column overrides for small mobile */
.rover-related-articles--mobile-columns-1 .rover-related-articles__grid {
grid-template-columns: 1fr !important;
}
.rover-related-articles--mobile-columns-2 .rover-related-articles__grid {
grid-template-columns: repeat(2, 1fr) !important;
}
.rover-related-articles--mobile-columns-3 .rover-related-articles__grid {
grid-template-columns: repeat(3, 1fr) !important;
}
.rover-related-articles--mobile-columns-4 .rover-related-articles__grid {
grid-template-columns: repeat(4, 1fr) !important;
}
/* Fallback for existing behavior when no mobile_columns specified */
.rover-related-articles:not([class*="mobile-columns"]).rover-related-articles--columns-2 .rover-related-articles__grid,
.rover-related-articles:not([class*="mobile-columns"]).rover-related-articles--columns-3 .rover-related-articles__grid,
.rover-related-articles:not([class*="mobile-columns"]).rover-related-articles--columns-4 .rover-related-articles__grid {
grid-template-columns: 1fr;
}
.rover-related-articles__grid {
gap: 12px;
}
/* Adjust spacing for mobile single column */
.rover-related-articles--mobile-columns-1 .rover-related-articles__grid {
gap: 16px;
}
/* Tighter spacing for mobile multi-column */
.rover-related-articles--mobile-columns-3 .rover-related-articles__grid,
.rover-related-articles--mobile-columns-4 .rover-related-articles__grid {
gap: 8px;
}
/* Adjust image heights for different mobile column counts */
.rover-related-articles--mobile-columns-3 .rover-related-articles__image,
.rover-related-articles--mobile-columns-4 .rover-related-articles__image {
height: 80px;
}
/* Smaller text for dense mobile layouts */
.rover-related-articles--mobile-columns-3 .rover-related-articles__item-title,
.rover-related-articles--mobile-columns-4 .rover-related-articles__item-title {
font-size: 12px;
-webkit-line-clamp: 2;
}
.rover-related-articles--mobile-columns-3 .rover-related-articles__excerpt p,
.rover-related-articles--mobile-columns-4 .rover-related-articles__excerpt p {
font-size: 10px;
-webkit-line-clamp: 1;
}
.rover-related-articles--mobile-columns-3 .rover-related-articles__meta,
.rover-related-articles--mobile-columns-4 .rover-related-articles__meta {
font-size: 9px;
}
}
/* Dynamic article count adjustments */
.rover-related-articles--count-3 .rover-related-articles__grid {
/* 3 articles: slightly larger gaps for better balance */
gap: 14px;
}
.rover-related-articles--count-5 .rover-related-articles__grid,
.rover-related-articles--count-7 .rover-related-articles__grid {
/* Odd counts: adjust gaps for visual balance */
gap: 12px;
}
.rover-related-articles--count-8 .rover-related-articles__grid,
.rover-related-articles--count-9 .rover-related-articles__grid,
.rover-related-articles--count-10 .rover-related-articles__grid,
.rover-related-articles--count-11 .rover-related-articles__grid,
.rover-related-articles--count-12 .rover-related-articles__grid {
/* Many articles: tighter spacing */
gap: 8px;
}
.rover-related-articles--count-8 .rover-related-articles__item,
.rover-related-articles--count-9 .rover-related-articles__item,
.rover-related-articles--count-10 .rover-related-articles__item,
.rover-related-articles--count-11 .rover-related-articles__item,
.rover-related-articles--count-12 .rover-related-articles__item {
/* Slightly more compact for many articles */
}
.rover-related-articles--count-8 .rover-related-articles__image,
.rover-related-articles--count-9 .rover-related-articles__image,
.rover-related-articles--count-10 .rover-related-articles__image,
.rover-related-articles--count-11 .rover-related-articles__image,
.rover-related-articles--count-12 .rover-related-articles__image {
height: 100px; /* Slightly smaller images for many articles */
}
.rover-related-articles--count-8 .rover-related-articles__item-title,
.rover-related-articles--count-9 .rover-related-articles__item-title,
.rover-related-articles--count-10 .rover-related-articles__item-title,
.rover-related-articles--count-11 .rover-related-articles__item-title,
.rover-related-articles--count-12 .rover-related-articles__item-title {
font-size: 13px; /* Slightly smaller titles for many articles */
}
/* Elementor container compatibility - prevent overflow */
.elementor-widget-shortcode .rover-related-articles {
max-width: 100%;
overflow: hidden;
}
.elementor-widget-shortcode .rover-related-articles__grid {
max-width: 100%;
}
.elementor-widget-shortcode .rover-related-articles__item {
max-width: 100%;
word-wrap: break-word;
overflow-wrap: break-word;
}
html.dark .rover-section-container,
body.dark .rover-section-container {
background-color: var(--rover-bg-surface, #1C1E21) !important;
border: none !important;
}
/* Special handling for headline ticker in dark mode */
html.dark .rover-headline-ticker,
body.dark .rover-headline-ticker {
background-color: var(--rover-bg-surface, #1C1E21) !important;
border: none !important;
}
/* Debug: Force removal of any stray borders in dark mode */
html.dark [class*="rover-"]:not([class*="__header"]):not([class*="__label"]),
body.dark [class*="rover-"]:not([class*="__header"]):not([class*="__label"]) {
border-left: none !important;
border-right: none !important;
border-top: none !important;
}
/* Preserve intentional design borders in dark mode */
html.dark .rover-outlet-section__header,
body.dark .rover-outlet-section__header {
border-bottom: 2px solid var(--rover-white) !important;
}
/* ===== RESPONSIVE SIZING FOR DARK MODE ===== */
/* Ensure dark mode variants maintain proper sizing */
html.dark .korean-weather-widget.compact,
html.dark .korean-baseball-widget.compact,
body.dark .korean-weather-widget.compact,
body.dark .korean-baseball-widget.compact {
padding: 6px 10px;
gap: 6px;
}
html.dark .korean-weather-widget.icon-only,
html.dark .korean-baseball-widget.icon-only,
body.dark .korean-weather-widget.icon-only,
body.dark .korean-baseball-widget.icon-only {
padding: 6px 8px;
gap: 0;
}
html.dark .korean-weather-widget.minimal,
body.dark .korean-weather-widget.minimal {
padding: 6px 10px;
gap: 6px;
}
/* ===== CONTEXT-AWARE STYLING ===== */
/* Automatically adjust based on parent background */
.rover-header .korean-weather-widget,
.rover-header .korean-baseball-widget,
.orange-header .korean-weather-widget,
.orange-header .korean-baseball-widget {
color: white;
}
.rover-header .korean-weather-widget .weather-temp,
.rover-header .korean-weather-widget .weather-condition,
.rover-header .korean-weather-widget .weather-date,
.rover-header .korean-baseball-widget .baseball-score,
.rover-header .korean-baseball-widget .baseball-teams,
.orange-header .korean-weather-widget .weather-temp,
.orange-header .korean-weather-widget .weather-condition,
.orange-header .korean-weather-widget .weather-date,
.orange-header .korean-baseball-widget .baseball-score,
.orange-header .korean-baseball-widget .baseball-teams {
color: white;
}
/* Content area styling (light backgrounds) */
.rover-content .korean-weather-widget,
.rover-content .korean-baseball-widget,
.main-content .korean-weather-widget,
.main-content .korean-baseball-widget {
color: var(--rover-text-primary);
background: var(--rover-bg-surface);
border: 1px solid var(--rover-border-light);
border-radius: 8px;
padding: 8px 12px;
}
.rover-content .korean-weather-widget .weather-temp,
.rover-content .korean-weather-widget .weather-condition,
.rover-content .korean-weather-widget .weather-date,
.rover-content .korean-baseball-widget .baseball-score,
.rover-content .korean-baseball-widget .baseball-teams,
.main-content .korean-weather-widget .weather-temp,
.main-content .korean-weather-widget .weather-condition,
.main-content .korean-weather-widget .weather-date,
.main-content .korean-baseball-widget .baseball-score,
.main-content .korean-baseball-widget .baseball-teams {
color: var(--rover-text-primary);
}
/* ================================
KOREAN PATCH CONNECT ACCOUNT BUTTON
================================ */
.connect-account-button, .connect-account-button .elementor-button {
/* Core Button Styling */
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
padding: 12px 16px !important;
min-height: 44px !important;
border-radius: 8px !important;
font-family: "Neodgm Pro", sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
text-transform: lowercase !important;
white-space: nowrap !important;
background-color: #ffffff !important;
color: #1a1a1a !important;
border: 1px solid #000 !important;
box-shadow: 4px 4px 0 #0a1a1a !important;
/* Smooth Transitions */
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
/* Prevent text selection */
user-select: none !important;
-webkit-user-select: none !important;
-moz-user-select: none !important;
/* Ensure proper positioning */
position: relative !important;
z-index: 1 !important;
}
/* Hover State */
.connect-account-button:hover {
/* Slight lift effect */
transform: translateY(-2px) !important;
box-shadow: 4px 4px 0 #0a1a1a !important;
/* Subtle background change */
background-color: #f8f9fa !important;
border: 1px solid #000 !important;
color: #1a1a1a !important;
border-color: #000 !important;
}
/* Active/Pressed State */
.connect-account-button:active {
/* Press down effect */
transform: translateY(2px) !important;
box-shadow: 4px 4px 0 #0a1a1a !important;
background-color: #f1f3f4 !important;
transition: all 0.05s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* Focus State for Accessibility */
.connect-account-button:focus {
outline: 2px solid #F87614 !important;
outline-offset: 2px !important;
}
/* Korean Patch SVG Logo Icon - Now handled in HTML */
.connect-account-button .kp-logo-icon {
width: 22px !important;
height: 22px !important;
display: inline-block !important;
vertical-align: middle !important;
flex-shrink: 0 !important;
margin: -1px !important;
}
/* Dark Mode Support - Keep white background */
html.dark .connect-account-button,
body.dark .connect-account-button,
[data-theme="dark"] .connect-account-button,
.dark .connect-account-button {
/* Maintain white background in dark mode for contrast */
background-color: #ffffff !important;
color: #1a1a1a !important;
border-color: #000 !important;
border: 1px solid #000 !important;
/* Keep the same hard drop shadow */
box-shadow: 4px 4px 0 #0a1a1a !important;
}
html.dark .connect-account-button:hover,
body.dark .connect-account-button:hover,
[data-theme="dark"] .connect-account-button:hover,
.dark .connect-account-button:hover {
background-color: #00C49A !important;
color: #1a1a1a !important;
border-color: #00C49A !important;
box-shadow: 4px 4px 0 #0a1a1a !important;
}
html.dark .connect-account-button:active,
body.dark .connect-account-button:active,
[data-theme="dark"] .connect-account-button:active,
.dark .connect-account-button:active {
background-color: #f1f3f4 !important;
box-shadow: 4px 4px 0 #0a1a1a !important;
}
/* Small/Compact Variant */
.connect-account-button.compact {
padding: 8px 12px !important;
min-height: 36px !important;
font-size: 13px !important;
border-radius: 6px !important;
}
.connect-account-button.compact .kp-logo-icon {
width: 14px !important;
height: 14px !important;
margin: 0 3px !important;
}
/* Large Variant */
.connect-account-button.large {
padding: 16px 24px !important;
min-height: 52px !important;
font-size: 16px !important;
border-radius: 10px !important;
}
.connect-account-button.large .kp-logo-icon {
width: 18px !important;
height: 18px !important;
margin: 0 6px !important;
}
/* Floating Widget Specific Styles */
.elementor-widget-shortcode .connect-account-button {
width: 100% !important;
}
/* Mobile Responsiveness */
@media (max-width: 768px) {
.connect-account-button {
font-size: 13px !important;
padding: 10px 14px !important;
min-height: 40px !important;
}
.connect-account-button .kp-logo-icon {
width: 15px !important;
height: 15px !important;
}
}
/* Extra Small Mobile */
@media (max-width: 480px) {
.connect-account-button {
font-size: 12px !important;
padding: 8px 12px !important;
min-height: 36px !important;
border-radius: 6px !important;
}
.connect-account-button .kp-logo-icon {
width: 14px !important;
height: 14px !important;
margin: 0 3px !important;
}
}
/* Prevent conflicts with theme styles */
.connect-account-button.elementor-button {
/* Override any Elementor button styles */
background-image: none !important;
text-shadow: none !important;
background: var(-rove--rover-white #FFFFFF) !important;
}
/* High contrast mode support */
@media (prefers-contrast: high) {
.connect-account-button {
border-width: 2px !important;
border-color: #000000 !important;
}
}
/* ================================
CONNECT ACCOUNT EXPANDABLE BUTTON
================================ */
/* Wrapper for the expandable button */
.connect-account-wrapper {
display: inline-block !important;
position: relative !important;
}
/* Hidden link for navigation */
.connect-hidden-link {
position: absolute !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* Expandable button container */
.connect-expandable-button {
/* Base button styling */
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
position: relative !important;
overflow: hidden !important;
/* Start as square */
width: 44px !important;
height: 44px !important;
min-height: 44px !important;
padding: 10px !important;
border-radius: 8px !important;
/* Styling */
background-color: #ffffff !important;
color: #1a1a1a !important;
border: 1px solid #000 !important;
box-shadow: 4px 4px 0 #0a1a1a !important;
/* Smooth transitions for expansion - delayed for exit animation */
transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s,
padding 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s !important;
/* Cursor and selection */
cursor: pointer !important;
user-select: none !important;
-webkit-user-select: none !important;
-moz-user-select: none !important;
/* Font styling */
font-family: "Neodgm Pro", sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
text-transform: lowercase !important;
white-space: nowrap !important;
}
/* Content container for proper centering */
.connect-expandable-button .button-content {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
flex: 1 !important;
position: relative !important;
min-width: 20px !important; /* Allow flex shrinking */
}
/* In collapsed state, only show the icon */
.connect-expandable-button:not(.expanded) .button-content {
gap: 0 !important;
}
/* Button icon (always visible, stays centered) */
.connect-expandable-button .button-icon {
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
z-index: 2 !important;
}
.connect-expandable-button .button-icon .kp-logo-icon {
width: 22px !important;
height: 22px !important;
margin: 0 !important;
}
/* Left text (hidden initially) */
.connect-expandable-button .button-text-left {
opacity: 0 !important;
transform: translateY(15px) !important;
transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s,
transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s !important;
flex-shrink: 0 !important;
width: 0 !important; /* Take no space when collapsed */
overflow: hidden !important;
}
/* Right text (hidden initially) */
.connect-expandable-button .button-text-right {
opacity: 0 !important;
transform: translateY(15px) !important;
transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.25s,
transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.25s !important;
flex-shrink: 0 !important;
width: 0 !important; /* Take no space when collapsed */
overflow: hidden !important;
}
/* Close button (hidden initially) */
.connect-expandable-button .button-close {
opacity: 0 !important;
transform: translateY(15px) scale(0.8) !important;
transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s,
transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 24px !important;
height: 24px !important;
border-radius: 4px !important;
background-color: rgba(102, 102, 102, 0.1) !important;
color: #666666 !important;
font-size: 16px !important;
font-weight: bold !important;
line-height: 1 !important;
flex-shrink: 0 !important;
z-index: 3 !important;
cursor: pointer !important;
}
/* Expanded state */
.connect-expandable-button.expanded {
width: 200px !important;
padding: 12px 16px !important;
/* Remove transition delay for expanding */
transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
padding 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
.connect-expandable-button.expanded .button-text-left {
opacity: 1 !important;
transform: translateY(0) !important;
width: auto !important; /* Allow natural width when expanded */
}
.connect-expandable-button.expanded .button-text-right {
opacity: 1 !important;
transform: translateY(0) !important;
width: auto !important; /* Allow natural width when expanded */
}
.connect-expandable-button.expanded .button-close {
opacity: 1 !important;
transform: translateY(0) scale(1) !important;
}
/* Collapsing state - fast exit animations */
.connect-expandable-button.collapsing .button-text-left,
.connect-expandable-button.collapsing .button-text-right {
opacity: 0 !important;
transform: translateY(15px) !important;
transition: opacity 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94),
transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
.connect-expandable-button.collapsing .button-close {
opacity: 0 !important;
transform: translateY(15px) scale(0.8) !important;
transition: opacity 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94),
transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
/* Hover states */
.connect-expandable-button:hover {
transform: translateY(-2px) !important;
box-shadow: 4px 4px 0 #0a1a1a !important;
background-color: #f8f9fa !important;
}
.connect-expandable-button:active {
transform: translateY(2px) !important;
box-shadow: 4px 4px 0 #0a1a1a !important;
background-color: #f1f3f4 !important;
}
.connect-expandable-button .button-close:hover {
background-color: rgba(102, 102, 102, 0.2) !important;
color: #333333 !important;
}
/* Dark mode support */
html.dark .connect-expandable-button,
body.dark .connect-expandable-button,
[data-theme="dark"] .connect-expandable-button,
.dark .connect-expandable-button {
background-color: #ffffff !important;
color: #1a1a1a !important;
border-color: #000 !important;
box-shadow: 4px 4px 0 #0a1a1a !important;
}
html.dark .connect-expandable-button:hover,
body.dark .connect-expandable-button:hover,
[data-theme="dark"] .connect-expandable-button:hover,
.dark .connect-expandable-button:hover {
background-color: #00C49A !important;
color: #1a1a1a !important;
border-color: #00C49A !important;
}
html.dark .connect-expandable-button .button-close,
body.dark .connect-expandable-button .button-close,
[data-theme="dark"] .connect-expandable-button .button-close,
.dark .connect-expandable-button .button-close {
background-color: rgba(255, 255, 255, 0.1) !important;
color: #cccccc !important;
}
html.dark .connect-expandable-button .button-close:hover,
body.dark .connect-expandable-button .button-close:hover,
[data-theme="dark"] .connect-expandable-button .button-close:hover,
.dark .connect-expandable-button .button-close:hover {
background-color: rgba(255, 255, 255, 0.2) !important;
color: #ffffff !important;
}
/* Mobile responsiveness */
@media (max-width: 768px) {
.connect-expandable-button {
width: 40px !important;
height: 40px !important;
min-height: 40px !important;
padding: 8px !important;
}
.connect-expandable-button .button-icon .kp-logo-icon {
width: 18px !important;
height: 18px !important;
}
.connect-expandable-button.expanded {
width: 170px !important;
padding: 10px 14px !important;
}
.connect-expandable-button .button-content {
gap: 6px !important;
}
.connect-expandable-button .button-close {
width: 20px !important;
height: 20px !important;
font-size: 14px !important;
}
}
@media (max-width: 480px) {
.connect-expandable-button {
width: 36px !important;
height: 36px !important;
min-height: 36px !important;
padding: 6px !important;
border-radius: 6px !important;
}
.connect-expandable-button .button-icon .kp-logo-icon {
width: 16px !important;
height: 16px !important;
}
.connect-expandable-button.expanded {
width: 150px !important;
padding: 8px 12px !important;
}
.connect-expandable-button .button-content {
gap: 5px !important;
}
.connect-expandable-button .button-close {
width: 18px !important;
height: 18px !important;
font-size: 12px !important;
}
}
/* ===== ROVER MIXED GRID ENHANCEMENTS ===== */
/* Card clickability */
.rover-mixed-grid__item {
position: relative;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.rover-mixed-grid__item:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
/* Card overlay link - covers entire card */
.rover-mixed-grid__card-link {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
text-decoration: none;
color: transparent;
background: transparent;
}
/* Interactive elements that should appear above the overlay */
.rover-mixed-grid__outlet-badge,
.rover-mixed-grid__category,
.rover-mixed-grid__source,
.rover-mixed-grid__link-options {
position: relative;
z-index: 2;
}
/* Outlet and category links */
.rover-mixed-grid__outlet-link,
.rover-mixed-grid__category,
.rover-mixed-grid__outlet-link a:not(.elementor-button),
.rover-mixed-grid__source {
text-decoration: none;
color: var(--rover-white, #FFFFFF) !important;
padding: 2px 4px;
border-radius: 3px;
transition: background-color 0.2s ease;
}
.rover-mixed-grid__outlet-link:hover,
.rover-mixed-grid__outlet-link a:hover:not(.elementor-button),
.rover-mixed-grid__category:hover,
.rover-mixed-grid__source:hover {
background-color: rgba(0, 0, 0, 0.1);
text-decoration: none;
}
/* Dual link options (Naver/Daum style) */
.rover-mixed-grid__link-options {
position: absolute;
top: 8px;
right: 8px;
display: flex;
gap: 4px;
z-index: 3;
}
.rover-mixed-grid__btn-portal,
.rover-mixed-grid__btn-original {
padding: 4px 8px;
font-size: 11px;
text-decoration: none;
border-radius: 3px;
font-weight: 500;
transition: all 0.2s ease;
cursor: pointer;
}
.rover-mixed-grid__btn-portal {
background-color: #4285f4;
color: white;
}
.rover-mixed-grid__btn-portal:hover {
background-color: #3367d6;
color: white;
text-decoration: none;
}
.rover-mixed-grid__btn-original {
background-color: #34a853;
color: white;
}
.rover-mixed-grid__btn-original:hover {
background-color: #2d8f47;
color: white;
text-decoration: none;
}
/* External link styling */
.rover-mixed-grid__item.external-link {
border-left: 3px solid #34a853;
}
.rover-mixed-grid__item.external-link::after {
content: "↗";
position: absolute;
top: 8px;
right: 8px;
font-size: 12px;
color: #34a853;
z-index: 2;
}
/* Hide external icon when dual links are shown */
.rover-mixed-grid__item.external-link:has(.rover-mixed-grid__link-options)::after {
display: none;
}
/* Major outlet internal link hint */
.rover-mixed-grid__item.internal-link.major-outlet {
border-left: 3px solid #ff9800;
}
/* Comments styling */
.rover-mixed-grid__comments {
color: #666;
font-size: 0.9em;
}
/* Accessibility improvements */
.rover-mixed-grid__card-link:focus {
outline: 2px solid #4285f4;
outline-offset: 2px;
z-index: 4;
}
/* ===== ROVER PEOPLE STORIES ENHANCEMENTS ===== */
/* Card clickability */
.rover-people-stories__item {
position: relative;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.rover-people-stories__item:hover {
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* Card overlay link */
.rover-people-stories__card-link {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
text-decoration: none;
color: transparent;
background: transparent;
}
/* Interactive elements above overlay */
.rover-people-stories__outlet-badge,
.rover-people-stories__source,
.rover-people-stories__category,
.rover-people-stories__link-options {
position: relative;
z-index: 2;
}
/* Outlet and category links */
.rover-people-stories__outlet-link,
.rover-people-stories__outlet-link a:not(.elementor-button),
.rover-people-stories__source,
.rover-people-stories__category {
text-decoration: none;
color: var(--rover-white, #FFFFFF) !important;
padding: 2px 4px;
border-radius: 3px;
transition: background-color 0.2s ease;
}
.rover-people-stories__outlet-link:hover,
.rover-people-stories__outlet-link a:hover:not(.elementor-button),
.rover-people-stories__source:hover,
.rover-people-stories__category:hover {
background-color: rgba(0, 0, 0, 0.1);
text-decoration: none;
}
/* Dual link options */
.rover-people-stories__link-options {
position: absolute;
top: 8px;
right: 8px;
display: flex;
gap: 4px;
z-index: 3;
}
.rover-people-stories__btn-portal,
.rover-people-stories__btn-original {
padding: 3px 6px;
font-size: 10px;
text-decoration: none;
border-radius: 3px;
font-weight: 500;
transition: all 0.2s ease;
cursor: pointer;
}
.rover-people-stories__btn-portal {
background-color: #4285f4;
color: white;
}
.rover-people-stories__btn-portal:hover {
background-color: #3367d6;
color: white;
text-decoration: none;
}
.rover-people-stories__btn-original {
background-color: #34a853;
color: white;
}
.rover-people-stories__btn-original:hover {
background-color: #2d8f47;
color: white;
text-decoration: none;
}
/* External link styling */
.rover-people-stories__item.external-link {
border-left: 3px solid #34a853;
}
.rover-people-stories__item.external-link::after {
content: "↗";
position: absolute;
top: 8px;
right: 8px;
font-size: 11px;
color: #34a853;
z-index: 2;
}
/* Hide external icon when dual links are shown */
.rover-people-stories__item.external-link:has(.rover-people-stories__link-options)::after {
display: none;
}
/* Major outlet internal link hint */
.rover-people-stories__item.internal-link.major-outlet {
border-left: 3px solid #ff9800;
}
.rover-people-stories__card-link:focus {
outline: 2px solid #4285f4;
outline-offset: 2px;
z-index: 4;
}
/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
.connect-account-button {
transition: none !important;
}
.connect-account-button:hover {
transform: none !important;
}
.connect-account-button:active {
transform: none !important;
}
.rover-mixed-grid__item {
transition: none !important;
}
}
/* ===== WEATHER FORECAST PAGE STYLES ===== */
/* Weather Document Layout */
#weather-doc.weather-doc {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background: #f8f9fa;
min-height: 100vh;
}
/* ===== WEATHER CARD STYLES FOR ROVER MIXED GRID ===== */
/* Current Weather Card */
.rover-weather-current {
text-align: center;
padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: 12px;
margin: -16px;
position: relative;
overflow: hidden;
}
.rover-weather-current::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
z-index: 0;
}
.rover-weather-current > * {
position: relative;
z-index: 1;
}
.weather-icon-large {
font-size: 48px;
margin-bottom: 12px;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
.weather-temp-main {
font-size: 36px;
font-weight: 300;
margin-bottom: 8px;
}
.weather-condition {
font-size: 18px;
margin-bottom: 12px;
opacity: 0.9;
}
.weather-feels-like, .weather-comparison {
font-size: 14px;
background: rgba(255, 255, 255, 0.2);
padding: 4px 8px;
border-radius: 6px;
margin: 4px auto;
display: inline-block;
backdrop-filter: blur(5px);
}
/* Air Quality Card */
.rover-air-quality {
text-align: center;
padding: 16px;
}
.air-status {
font-size: 18px;
font-weight: 600;
padding: 8px 16px;
border-radius: 20px;
margin-bottom: 12px;
display: inline-block;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.air-status.좋음 {
background: #e8f5e8;
color: #4caf50;
}
.air-status.보통 {
background: #fff8e1;
color: #ff9800;
}
.air-status.나쁨 {
background: #ffebee;
color: #f44336;
}
.air-pm25, .air-pm10, .air-index {
font-size: 14px;
margin: 6px 0;
color: var(--rover-text-secondary);
}
/* Hourly Weather Card */
.rover-weather-hourly {
text-align: center;
padding: 12px;
}
.hourly-time {
font-size: 14px;
font-weight: 600;
color: var(--rover-orange);
margin-bottom: 8px;
}
.hourly-icon {
font-size: 32px;
margin: 8px 0;
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}
.hourly-temp {
font-size: 18px;
font-weight: 600;
margin: 8px 0;
color: var(--rover-text-primary);
}
.hourly-rain {
font-size: 12px;
color: #2196f3;
margin: 4px 0;
font-weight: 500;
}
.hourly-details {
display: flex;
justify-content: space-around;
margin-top: 8px;
}
.hourly-details small {
font-size: 10px;
color: var(--rover-text-caption);
}
/* Daily Weather Card */
.rover-weather-daily {
padding: 12px;
}
.daily-day {
font-size: 16px;
font-weight: 600;
color: var(--rover-text-primary);
text-align: center;
margin-bottom: 4px;
}
.daily-date {
font-size: 12px;
color: var(--rover-text-caption);
text-align: center;
margin-bottom: 12px;
}
.daily-temps {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
padding: 8px 12px;
background: var(--rover-bg-surface);
border-radius: 6px;
border: 1px solid var(--rover-border-light);
}
.high-temp {
color: #f44336;
font-weight: 600;
font-size: 16px;
}
.low-temp {
color: #2196f3;
font-weight: 600;
font-size: 16px;
}
.daily-conditions {
font-size: 11px;
color: var(--rover-text-secondary);
}
.am-cond, .pm-cond {
margin: 2px 0;
padding: 2px 4px;
background: rgba(0,0,0,0.05);
border-radius: 3px;
}
/* Weather Cards Dark Mode */
html.dark .rover-air-quality .air-pm25,
html.dark .rover-air-quality .air-pm10,
html.dark .rover-air-quality .air-index,
body.dark .rover-air-quality .air-pm25,
body.dark .rover-air-quality .air-pm10,
body.dark .rover-air-quality .air-index {
color: var(--rover-text-secondary);
}
html.dark .daily-temps,
body.dark .daily-temps {
background: var(--rover-bg-surface);
border-color: var(--rover-border-medium);
}
html.dark .am-cond,
html.dark .pm-cond,
body.dark .am-cond,
body.dark .pm-cond {
background: rgba(255,255,255,0.05);
}
/* ===== ROVER WEATHER GRID STYLES ===== */
/* Weather Grid Container */
.rover-weather-grid {
margin-bottom: 12px;
}
.rover-weather-grid__container {
display: grid;
gap: 16px;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
/* Weather Grid Items */
.rover-weather-grid__item {
background-color: var(--rover-bg-cards);
border: 1px solid var(--rover-border-light);
border-radius: 8px;
overflow: hidden;
transition: all 0.2s ease;
display: flex;
flex-direction: column;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
position: relative;
cursor: pointer;
}
.rover-weather-grid__item:hover {
border-color: var(--rover-blue-accent);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}
html.dark .rover-weather-grid__item,
body.dark .rover-weather-grid__item {
background-color: var(--rover-bg-dark, #202124);
border-color: var(--rover-border-dark, #3c4043);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
html.dark .rover-weather-grid__item:hover,
body.dark .rover-weather-grid__item:hover {
border-color: var(--rover-blue-accent);
box-shadow: 0 4px 12px rgba(138, 180, 248, 0.15);
}
/* Weather Grid Card Link */
.rover-weather-grid__card-link {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
text-decoration: none;
color: transparent;
background: transparent;
}
.rover-weather-grid__card-link:focus {
outline: 2px solid #4285f4;
outline-offset: 2px;
z-index: 4;
}
/* Weather Grid Content */
.rover-weather-grid__content {
padding: 16px;
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
position: relative;
z-index: 2;
}
/* Current Weather Item - Make it larger */
.rover-weather-grid__item--current {
grid-column: span 2;
}
/* Weather Layout Specific Grid Settings for mixed grid compatibility */
.rover-mixed-grid[data-layout="weather"] .rover-mixed-grid__container {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
}
/* Make current weather card larger in mixed grid too */
.rover-mixed-grid[data-layout="weather"] .rover-mixed-grid__item:first-child {
grid-column: span 2;
}
/* Mobile responsive for weather cards */
@media (max-width: 768px) {
.rover-weather-grid__container {
grid-template-columns: 1fr;
gap: 12px;
}
.rover-weather-grid__item--current {
grid-column: span 1;
}
.rover-mixed-grid[data-layout="weather"] .rover-mixed-grid__container {
grid-template-columns: 1fr;
gap: 12px;
}
.rover-mixed-grid[data-layout="weather"] .rover-mixed-grid__item:first-child {
grid-column: span 1;
}
.weather-icon-large {
font-size: 36px;
}
.weather-temp-main {
font-size: 28px;
}
}
.weather-main {
background: #ffffff;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
overflow: hidden;
}
/* Section Titles */
.section_title {
font-size: 18px;
font-weight: 600;
color: #333;
margin: 0 0 16px 0;
padding: 20px 20px 0 20px;
}
.screen_out {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0,0,0,0) !important;
border: 0 !important;
}
/* Current Weather Section */
.weather-current-section {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 30px 20px;
position: relative;
}
.wrap_location {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 20px;
}
.tit_location {
font-size: 20px;
font-weight: 600;
margin: 0;
}
.provider_name {
font-size: 12px;
opacity: 0.8;
background: rgba(255,255,255,0.2);
padding: 4px 8px;
border-radius: 12px;
}
.wrap_weather {
display: flex;
align-items: center;
gap: 30px;
}
.info_weather {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
flex-direction: row;
}
.weather_icon_large {
font-size: 64px;
line-height: 1;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.num_deg {
font-size: 48px;
font-weight: 300;
line-height: 1;
}
.txt_deg {
font-size: 24px;
opacity: 0.8;
}
.sub_info {
text-align: center;
}
.txt_sub {
display: block;
font-size: 16px;
font-weight: 500;
margin-bottom: 4px;
}
.txt_sub2 {
display: block;
font-size: 12px;
opacity: 0.8;
}
.list_air {
display: flex;
flex-direction: column;
gap: 12px;
margin: 0;
}
.item_air {
display: flex;
align-items: center;
gap: 8px;
background: rgba(255,255,255,0.15);
padding: 8px 12px;
border-radius: 8px;
backdrop-filter: blur(10px);
}
.item_air dt {
font-size: 12px;
font-weight: 600;
width: 30px;
margin: 0;
}
.item_air dd {
font-size: 14px;
margin: 0;
}
.air_quality {
padding: 2px 6px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
}
.air_quality.좋음 { background: #4caf50; color: white; }
.air_quality.보통 { background: #ff9800; color: white; }
.air_quality.나쁨 { background: #f44336; color: white; }
/* Hourly Forecast Section */
.weather-hourly-section {
border-bottom: 1px solid #e0e0e0;
}
.hourly_forecast_wrap {
padding: 0 20px 20px 20px;
}
.hourly_list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 16px;
overflow-x: auto;
padding-bottom: 8px;
}
.item_hourly {
background: #f8f9fa;
border-radius: 8px;
padding: 12px 8px;
text-align: center;
min-width: 90px;
border: 1px solid #e9ecef;
transition: all 0.2s ease;
}
.item_hourly:hover {
background: #e3f2fd;
border-color: #2196f3;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(33, 150, 243, 0.2);
}
.data_time {
font-size: 12px;
color: #666;
margin-bottom: 8px;
font-weight: 500;
}
.data_temp {
margin: 8px 0;
}
.weather_icon_small {
font-size: 24px;
display: block;
margin-bottom: 4px;
line-height: 1;
}
.temp_value {
display: block;
font-size: 14px;
font-weight: 600;
color: #333;
}
.data_rainfallp {
font-size: 11px;
color: #2196f3;
margin: 4px 0;
}
.data_wind, .data_humidity {
font-size: 10px;
color: #999;
margin: 2px 0;
}
/* Daily Forecast Section */
.weather-daily-section {
border-bottom: 1px solid #e0e0e0;
}
.daily_forecast_wrap {
padding: 0 20px 20px 20px;
}
.daily_list {
display: flex;
flex-direction: column;
gap: 12px;
}
.item_daily {
background: #f8f9fa;
border-radius: 8px;
padding: 16px;
border: 1px solid #e9ecef;
transition: all 0.2s ease;
}
.item_daily:hover {
background: #e8f5e8;
border-color: #4caf50;
box-shadow: 0 2px 8px rgba(76, 175, 80, 0.15);
}
.day_header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.day_name {
font-size: 16px;
font-weight: 600;
color: #333;
}
.day_date {
font-size: 12px;
color: #666;
}
.day_conditions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 12px;
}
.am_condition, .pm_condition {
background: white;
padding: 12px;
border-radius: 6px;
border: 1px solid #e0e0e0;
}
.period_label {
display: block;
font-size: 11px;
color: #666;
font-weight: 600;
margin-bottom: 4px;
}
.condition_text {
display: block;
font-size: 13px;
color: #333;
margin-bottom: 4px;
}
.precip_prob {
display: block;
font-size: 12px;
color: #2196f3;
font-weight: 500;
}
.temp_range {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
}
.temp_high {
color: #f44336;
font-size: 16px;
}
.temp_low {
color: #2196f3;
font-size: 16px;
}
.weather_warnings {
margin-top: 8px;
padding: 8px;
background: #fff3e0;
border-radius: 4px;
border-left: 3px solid #ff9800;
}
.warning_level {
font-size: 11px;
font-weight: 600;
padding: 2px 6px;
border-radius: 4px;
margin-right: 8px;
}
.warning_level.주의보 { background: #ff9800; color: white; }
.warning_level.경보 { background: #f44336; color: white; }
.warning_text {
font-size: 12px;
color: #333;
}
/* Weather Details Section */
.weather-details-section {
border-bottom: 1px solid #e0e0e0;
}
.details_grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
padding: 0 20px 20px 20px;
}
.detail_item {
background: #f8f9fa;
border-radius: 8px;
padding: 16px;
border: 1px solid #e9ecef;
text-align: center;
transition: all 0.2s ease;
}
.detail_item:hover {
background: #e3f2fd;
border-color: #2196f3;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(33, 150, 243, 0.1);
}
.detail_label {
font-size: 12px;
color: #666;
margin-bottom: 8px;
font-weight: 500;
}
.detail_value {
font-size: 18px;
font-weight: 600;
color: #333;
margin-bottom: 4px;
}
.detail_status {
font-size: 11px;
padding: 2px 8px;
border-radius: 12px;
font-weight: 600;
display: inline-block;
}
.detail_status.좋음 { background: #e8f5e8; color: #4caf50; }
.detail_status.보통 { background: #fff8e1; color: #ff9800; }
.detail_status.나쁨 { background: #ffebee; color: #f44336; }
/* Weather Meta Info */
.weather_meta {
padding: 20px;
background: #f5f5f5;
border-top: 1px solid #e0e0e0;
text-align: center;
}
.last_updated, .provider_info {
font-size: 12px;
color: #666;
margin: 4px 0;
}
/* Mobile Responsive */
@media (max-width: 768px) {
#weather-doc.weather-doc {
padding: 10px;
}
.weather-current-section {
padding: 20px 15px;
}
.wrap_weather {
flex-direction: column;
gap: 20px;
text-align: center;
}
.list_air {
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
}
.hourly_list {
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
gap: 8px;
}
.item_hourly {
padding: 8px 4px;
min-width: 70px;
}
.day_conditions {
grid-template-columns: 1fr;
gap: 8px;
}
.details_grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 12px;
padding: 0 15px 20px 15px;
}
.section_title {
padding: 15px 15px 0 15px;
}
.hourly_forecast_wrap,
.daily_forecast_wrap {
padding: 0 15px 15px 15px;
}
.num_deg {
font-size: 36px;
}
.weather_icon_large {
font-size: 48px;
}
}
@media (max-width: 480px) {
.wrap_location {
flex-direction: column;
gap: 8px;
text-align: center;
}
.hourly_list {
grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
}
.details_grid {
grid-template-columns: 1fr;
}
.temp_range {
justify-content: center;
gap: 20px;
}
.rover-mixed-grid__item:hover {
transform: none !important;
}
}
/* ===== CURRENT WEATHER COMPONENT STYLES (DAUM STYLE) ===== */
/* Screen reader only text */
.screen_out {
overflow: hidden;
position: absolute;
width: 0;
height: 0;
line-height: 0;
text-indent: -9999px;
}
/* Main weather container - matches Daum box_now_weather */
.box_now_weather {
background: var(--rover-bg-cards, #fff);
border: 1px solid var(--rover-border-light, #e3e3e3);
border-radius: 16px;
padding: 24px;
margin-bottom: 16px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.box_now_weather:hover {
transform: none;
}
html.dark .box_now_weather,
body.dark .box_now_weather {
background: var(--rover-bg-cards);
border-color: var(--rover-border-light);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
html.dark .tit_location,
body.dark .tit_location {
color: var(--rover-text-primary);
}
html.dark .num_deg,
html.dark .txt_condition,
body.dark .num_deg,
body.dark .txt_condition {
color: var(--rover-text-primary);
}
html.dark .txt_comparison,
body.dark .txt_comparison {
color: var(--rover-text-secondary);
}
/* Weather container wrapper */
.wrap_now_weather {
position: relative;
}
/* Location section */
.wrap_location {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 1px solid var(--rover-border-light, #e5e7eb);
}
html.dark .wrap_location,
body.dark .wrap_location {
border-bottom-color: var(--rover-border-dark, #374151);
}
.info_location {
flex: 1;
}
.tit_location {
font-size: 18px;
font-weight: 600;
color: var(--rover-text-primary, #111827);
margin: 0;
}
html.dark .tit_location,
body.dark .tit_location {
color: var(--rover-text-dark, #f9fafb);
}
/* Weather provider icons */
.ico_weather {
width: 24px;
height: 16px;
display: inline-block;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.ico_weather.ico_hdu {
background-image: url('data:image/svg+xml;utf8,');
}
.ico_weather.ico_ygp {
background-image: url('data:image/svg+xml;utf8,');
}
.ico_weather.ico_weather {
background-image: url('data:image/svg+xml;utf8,');
}
/* Weather info section */
.wrap_weather {
display: grid;
grid-template-columns: 1fr auto;
gap: 24px;
align-items: start;
}
.info_weather {
display: flex;
align-items: center;
gap: 16px;
}
/* Weather condition icon */
.wcondition_icon {
font-size: 48px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
}
.wcondition_icon .weather-animation {
animation: weather-pulse 2s ease-in-out infinite;
}
.weather-condition-sunny .weather-animation {
animation: weather-spin 8s linear infinite;
}
@keyframes weather-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.05); opacity: 0.9; }
}
@keyframes weather-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Temperature display */
.num_deg {
font-size: 48px;
font-weight: 300;
color: var(--rover-text-primary, #111827);
line-height: 1;
margin-right: 8px;
}
html.dark .num_deg,
body.dark .num_deg {
color: var(--rover-text-dark, #f9fafb);
}
.txt_deg {
font-size: 24px;
font-weight: 400;
color: var(--rover-text-secondary, #6b7280);
vertical-align: top;
}
html.dark .txt_deg,
body.dark .txt_deg {
color: var(--rover-text-dark-secondary, #9ca3af);
}
/* Sub info */
.sub_info {
display: flex;
flex-direction: column;
gap: 4px;
margin-left: 12px;
}
.txt_sub {
font-size: 16px;
font-weight: 500;
color: var(--rover-text-primary, #374151);
}
.txt_sub2 {
font-size: 14px;
color: var(--rover-text-secondary, #6b7280);
}
body.dark .txt_sub {
color: var(--rover-text-dark, #e5e7eb);
}
body.dark .txt_sub2 {
color: var(--rover-text-dark-secondary, #9ca3af);
}
/* Air quality and additional info */
.list_air {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin: 0;
}
.item_air {
display: flex;
flex-direction: column;
align-items: center;
padding: 12px;
background: var(--rover-bg-secondary, #f8fafc);
border-radius: 8px;
transition: background-color 0.2s ease;
}
html.dark .item_air,
body.dark .item_air {
background: var(--rover-bg-dark-secondary, #374151);
}
.item_air dt {
font-size: 12px;
color: var(--rover-text-tertiary, #9ca3af);
margin: 0 0 4px 0;
font-weight: 500;
}
html.dark .item_air dt,
body.dark .item_air dt {
color: var(--rover-text-dark-tertiary, #6b7280);
}
.item_air dd {
margin: 0;
font-size: 14px;
font-weight: 600;
color: var(--rover-text-primary, #111827);
display: flex;
align-items: baseline;
gap: 2px;
}
html.dark .item_air dd,
body.dark .item_air dd {
color: var(--rover-text-dark, #f9fafb);
}
.txt_unit {
font-size: 12px;
font-weight: 400;
color: var(--rover-text-secondary, #6b7280);
}
html.dark .txt_unit,
body.dark .txt_unit {
color: var(--rover-text-dark-secondary, #9ca3af);
}
/* Air quality status colors */
.air_quality {
padding: 2px 8px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
}
.air_quality_좋음 { background: #22c55e; color: white; }
.air_quality_보통 { background: #fbbf24; color: white; }
.air_quality_나쁨 { background: #f97316; color: white; }
.air_quality_매우나쁨 { background: #ef4444; color: white; }
/* Mobile responsive */
@media (max-width: 768px) {
.box_now_weather {
padding: 16px;
margin-bottom: 12px;
}
.wrap_location {
flex-direction: column;
gap: 12px;
align-items: flex-start;
}
.select_cp {
align-self: flex-end;
min-width: 120px;
}
.wrap_weather {
grid-template-columns: 1fr;
gap: 16px;
}
.info_weather {
gap: 12px;
}
.wcondition_icon {
font-size: 36px;
width: 48px;
height: 48px;
}
.num_deg {
font-size: 36px;
}
.txt_deg {
font-size: 18px;
}
.list_air {
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.item_air {
padding: 8px;
}
}
.info_location {
display: flex;
align-items: center;
}
.tit_location {
font-size: 18px;
font-weight: 600;
color: var(--rover-text-primary);
margin: 0;
}
html.dark .tit_location,
body.dark .tit_location {
color: var(--rover-text-primary-dark, #e8eaed);
}
/* Weather provider .elementor-kit-3 */
.select_cp {
position: relative;
width: 130px;
}
.select_cp .btn_selected {
display: flex;
align-items: center;
height: 34px;
padding: 4px;
background: #F4F6F867;
border: none;
box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.12);
border-radius: 16px;
font-size: 13px;
color: var(--rover-text-primary);
cursor: pointer;
transition: all 0.2s ease;
}
.select_cp .btn_selected:hover {
background: var(--rover-bg-hover);
}
html.dark .select_cp .btn_selected,
body.dark .select_cp .btn_selected {
background: var(--rover-bg-darker, #292a2d);
border-color: var(--rover-border-dark, #3c4043);
color: var(--rover-text-primary-dark, #e8eaed);
}
html.dark .select_cp .btn_selected:hover,
body.dark .select_cp .btn_selected:hover {
background: var(--rover-bg-surface, #1C1E21);
border-color: var(--rover-blue-accent);
}
.select_cp .ico_weather {
width: 32px;
height: 20px;
background-size: contain;
background-position: center;
}
.select_cp .provider-logo {
width: 80%;
height: 15px;
object-fit: contain;
object-position: center;
}
.select_cp .btn_option .provider-logo {
width: 100%;
height: auto;
object-fit: contain;
object-position: center;
}
.select_cp .ico_fold {
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 6px solid #101010;
margin-left: 4px;
opacity: 0.8;
}
.select_cp .list_option {
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: var(--rover-bg-cards);
border-radius: 12px;
margin-top: 4px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
z-index: 100;
overflow: hidden;
list-style: none;
padding: 0;
margin: 4px 0 0 0;
}
html.dark .select_cp .list_option,
body.dark .select_cp .list_option {
background: var(--rover-bg-dark, #202124);
border-color: var(--rover-border-dark, #3c4043);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.select_cp .list_option li {
border-bottom: 1px solid var(--rover-border-light);
}
.select_cp .list_option li:last-child {
border-bottom: none;
}
html.dark .select_cp .list_option li,
body.dark .select_cp .list_option li {
border-bottom-color: var(--rover-border-dark, #3c4043);
}
.select_cp .btn_option {
display: flex;
align-items: center;
width: 100%;
padding: 8px 8px;
background: transparent;
border: none;
font-size: 13px;
color: var(--rover-text-primary);
cursor: pointer;
transition: all 0.2s ease;
}
.select_cp .btn_option:hover {
background: rgba(0, 0, 0, 0.05);
}
.select_cp .btn_option[aria-selected='true'] {
background: #f4f6f867;
color: var(--rover-text-primary);
font-weight: 500;
}
html.dark .select_cp .btn_option,
body.dark .select_cp .btn_option {
color: var(--rover-text-primary-dark, #e8eaed);
}
html.dark .select_cp .btn_option:hover,
body.dark .select_cp .btn_option:hover {
background: var(--rover-bg-surface, #1C1E21);
}
/* Dark mode logo swapping */
html.dark .select_cp .provider-logo,
body.dark .select_cp .provider-logo {
filter: brightness(0) invert(1);
}
html.dark .select_cp .provider-logo[src*="weatherornot-logo.svg"],
body.dark .select_cp .provider-logo[src*="weatherornot-logo.svg"] {
content: url("https://roverkorea.com/wp-content/uploads/sites/15/2025/09/weatherornot-logo-white.svg");
filter: none;
}
html.dark .select_cp .provider-logo[src*="hdu-weather.svg"],
body.dark .select_cp .provider-logo[src*="hdu-weather.svg"] {
content: url("https://roverkorea.com/wp-content/uploads/sites/15/2025/09/hdu-weather-white.svg");
filter: none;
}
html.dark .select_cp .provider-logo[src*="ygp-weather.svg"],
body.dark .select_cp .provider-logo[src*="ygp-weather.svg"] {
content: url("https://roverkorea.com/wp-content/uploads/sites/15/2025/09/ygp-weather-white.svg");
filter: none;
}
/* Weather data section - horizontal flex layout */
.wrap_weather {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 16px;
}
/* Left side: Weather icon and temperature */
.info_weather {
display: flex;
align-items: center;
gap: 16px;
}
/* Weather condition icon with animation */
.wcondition_icon {
position: relative;
display: inline-block;
font-size: 48px;
}
.wcondition_icon.weather-condition-sunny .static_icon {
animation: rotate 20s linear infinite;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Temperature info section */
.temp_info {
display: flex;
flex-direction: column;
align-items: end;
flex-direction: row;
}
.num_deg {
font-size: 48px;
font-weight: 300;
color: var(--rover-text-primary);
line-height: 1;
margin-bottom: 4px;
}
.txt_condition {
font-size: 20px;
font-weight: 500;
color: var(--rover-text-primary);
line-height: 1rem;
margin-bottom: 2px;
}
.txt_comparison {
font-size: 14px;
padding-left: 8px !important;
line-height: 1rem;
color: var(--rover-text-secondary);
}
/* Right side: Square badges grid */
.weather_badges {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.badge_item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
width: 60px;
height: 60px;
background: rgba(244, 246, 248, 0.6);
border-radius: 12px;
padding: 6px;
transition: all 0.2s ease;
}
.badge_item:hover {
background: rgba(244, 246, 248, 0.8);
transform: translateY(-1px);
}
.badge_icon {
font-size: 18px;
margin-bottom: 2px;
}
.badge_label {
font-size: 10px;
color: var(--rover-text-secondary);
margin-bottom: 1px;
line-height: 1;
}
.badge_value {
font-size: 12px;
font-weight: 600;
color: var(--rover-text-primary);
line-height: 1;
}
/* Dark mode styles for badges */
html.dark .badge_item,
body.dark .badge_item {
background: rgba(255, 255, 255, 0.1);
}
html.dark .badge_item:hover,
body.dark .badge_item:hover {
background: rgba(255, 255, 255, 0.15);
}
.info_weather {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
}
/* Weather icon */
.wcondition_icon {
flex-shrink: 0;
font-size: 48px;
line-height: 1;
}
.wcondition_icon .static_icon,
.wcondition_icon .weather-animation {
display: block;
font-size: inherit;
}
.weather-condition-sunny .weather-animation {
animation: rotate 8s linear infinite;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Temperature display */
.num_deg {
font-size: 56px;
font-weight: 700;
line-height: 1;
color: var(--rover-text-primary);
letter-spacing: -2px;
}
.num_deg .txt_deg {
font-size: 0.6em;
font-weight: 400;
opacity: 0.8;
}
html.dark .num_deg,
body.dark .num_deg {
color: var(--rover-text-primary-dark, #e8eaed);
}
/* Sub info (condition and comparison) */
.sub_info {
display: flex;
flex-direction: column;
gap: 4px;
margin-left: 8px;
}
.txt_sub {
font-size: 16px;
font-weight: 500;
color: var(--rover-text-primary);
}
.txt_sub2 {
font-size: 14px;
color: var(--rover-text-secondary);
}
html.dark .txt_sub,
body.dark .txt_sub {
color: var(--rover-text-primary-dark, #e8eaed);
}
html.dark .txt_sub2,
body.dark .txt_sub2 {
color: var(--rover-text-secondary-dark, #9aa0a6);
}
/* Air quality and additional info */
.list_air {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin: 0;
padding: 0;
}
.item_air {
display: flex;
flex-direction: column;
align-items: center;
padding: 12px;
background: var(--rover-bg-surface);
border-radius: 8px;
border: 1px solid var(--rover-border-light);
}
html.dark .item_air,
body.dark .item_air {
background: var(--rover-bg-darker, #292a2d);
border-color: var(--rover-border-dark, #3c4043);
}
.item_air dt {
font-size: 12px;
font-weight: 500;
color: var(--rover-text-secondary);
margin-bottom: 4px;
}
.item_air dd {
margin: 0;
font-size: 14px;
font-weight: 600;
color: var(--rover-text-primary);
}
html.dark .item_air dt,
body.dark .item_air dt {
color: var(--rover-text-secondary-dark, #9aa0a6);
}
html.dark .item_air dd,
body.dark .item_air dd {
color: var(--rover-text-primary-dark, #e8eaed);
}
/* Air quality status colors */
.air_quality {
padding: 2px 6px;
border-radius: 4px;
font-size: 12px;
font-weight: 600;
}
.air_quality_좋음 {
background: #e8f5e8;
color: #4caf50;
}
.air_quality_보통 {
background: #fff8e1;
color: #ff9800;
}
.air_quality_나쁨 {
background: #ffebee;
color: #f44336;
}
html.dark .air_quality_좋음,
body.dark .air_quality_좋음 {
background: rgba(76, 175, 80, 0.2);
color: #81c784;
}
html.dark .air_quality_보통,
body.dark .air_quality_보통 {
background: rgba(255, 152, 0, 0.2);
color: #ffb74d;
}
html.dark .air_quality_나쁨,
body.dark .air_quality_나쁨 {
background: rgba(244, 67, 54, 0.2);
color: #e57373;
}
.txt_unit {
font-size: 0.9em;
opacity: 0.8;
}
/* Weather error state */
.weather-error {
padding: 16px;
background: #ffebee;
color: #d32f2f;
border-radius: 8px;
text-align: center;
font-weight: 500;
}
html.dark .weather-error,
body.dark .weather-error {
background: rgba(244, 67, 54, 0.2);
color: #e57373;
}
/* Responsive design */
@media (max-width: 768px) {
.box_now_weather {
padding: 16px;
}
.wrap_weather {
flex-direction: column;
gap: 16px;
}
.info_weather {
justify-content: center;
text-align: center;
}
.wcondition_icon {
font-size: 40px;
}
.num_deg {
font-size: 48px;
}
.list_air {
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.item_air {
padding: 8px;
}
.tit_location {
font-size: 16px;
}
}
@media (max-width: 480px) {
.wrap_location {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.select_cp {
align-self: stretch;
}
.list_air {
grid-template-columns: 1fr;
}
}
/* ===== HOURLY WEATHER COMPONENT ===== */
/* Hourly weather component styles */
.box_hourly_weather {
background: var(--rover-bg-primary, #ffffff);
border-radius: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
margin: 16px 0;
overflow: hidden;
}
/* Core Daum hourly weather structure */
.box_hourly_weather .slide_box.type_shadow {
position: relative;
border-bottom: 1px solid var(--rover-border-light, rgba(0,0,0,0.16));
}
.box_hourly_weather .fixed_head {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 80px;
padding-top: 20px;
background: var(--rover-bg-primary, #fff);
border-right: 1px solid var(--rover-border-light, rgba(0,0,0,0.04));
}
.box_hourly_weather .fixed_head .tit_data {
display: flex;
align-items: center;
height: 40px;
padding-left: 8px;
font-weight: 700;
font-size: 0.813em;
line-height: 1.54;
color: var(--rover-text-secondary, rgba(0,0,0,0.76));
letter-spacing: -0.04em;
white-space: nowrap;
border-bottom: 1px solid var(--rover-border-light, rgba(0,0,0,0.04));
}
.box_hourly_weather .fixed_head .txt_unit {
padding-left: 2px;
font-weight: 400;
color: var(--rover-text-tertiary, rgba(0,0,0,0.48));
}
.box_hourly_weather .fixed_head .tit_time {
height: auto;
padding-bottom: 160px;
}
.box_hourly_weather .fixed_head .tit_wind {
height: 50px;
}
.box_hourly_weather .wrap_scroll {
position: relative;
margin: 0;
padding-left: 80px;
overflow: hidden;
}
/* Flicking viewport and camera */
.box_hourly_weather .list_hourly .flicking-viewport {
position: relative;
overflow: hidden;
padding-top: 6px;
}
.box_hourly_weather .list_hourly .flicking-camera {
width: 100%;
height: 100%;
display: flex;
position: relative;
flex-direction: row;
}
.box_hourly_weather .list_hourly .flicking-panel {
display: inline-flex;
vertical-align: top;
flex-shrink: 0;
}
.box_hourly_weather .list_hourly .item_hourly {
width: 32px;
border-left: 1px solid var(--rover-border-light, rgba(0,0,0,0.04));
box-sizing: border-box;
}
/* Data cells styling - exact Daum heights */
.box_hourly_weather .list_hourly [class*='data_'] {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
height: 36px;
}
.box_hourly_weather .list_hourly .data_temp {
height: 150px;
justify-content: flex-start;
padding-top: 7px;
box-sizing: border-box;
}
.box_hourly_weather .list_hourly .data_wind {
height: 40px;
}
.box_hourly_weather .list_hourly .txt_data {
display: block;
font-size: 0.938em;
line-height: 1.33;
text-align: center;
white-space: nowrap;
color: var(--rover-text-primary, #000);
}
.box_hourly_weather .list_hourly .data_time {
height: auto;
font-weight: 700;
font-size: 0.813em;
line-height: 1.54;
color: var(--rover-text-secondary, rgba(0,0,0,0.76));
letter-spacing: -0.04em;
}
.box_hourly_weather .list_hourly .data_wind .tooltip_icon {
margin-bottom: -2px;
}
/* Weather condition icons */
.box_hourly_weather .wcondition_icon {
display: inline-block;
margin-bottom: 8px;
}
.box_hourly_weather .ico_wcondition {
display: inline-block;
width: 24px;
height: 24px;
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
text-indent: -9999px;
}
/* Tooltip styling */
.box_hourly_weather .tooltip_icon {
position: relative;
display: inline-block;
}
.box_hourly_weather .txt_tooltip {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s;
z-index: 1000;
}
.box_hourly_weather .tooltip_icon:hover .txt_tooltip {
opacity: 1;
}
/* Walking index emoji styling */
.box_hourly_weather .walking_emoji {
font-size: 18px;
line-height: 1;
}
/* Wind direction arrow styling */
.box_hourly_weather .wind_arrow {
display: inline-block;
font-size: 16px;
color: #3B82F6;
transform-origin: center;
transition: transform 0.2s ease;
margin-bottom: 2px;
}
.box_hourly_weather .slide_box {
border-bottom: 1px solid var(--rover-border-light, rgba(0,0,0,0.16));
}
/* Horizontal scrolling functionality */
.box_hourly_weather .flicking-viewport {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.box_hourly_weather .flicking-viewport::-webkit-scrollbar {
display: none;
}
.box_hourly_weather .flicking-camera {
min-width: max-content;
}
/* Dog walking highlights */
.box_hourly_weather .item_dogwalk::before {
position: absolute;
top: -6px;
left: -1px;
right: -1px;
height: calc(100% + 12px);
border: 1px solid rgba(50,138,246,0.1);
border-radius: 6px 6px 0 0;
background: linear-gradient(to right, rgba(50,138,246,0.1) 0%, rgba(50,138,246,0.1) 100%);
content: '';
z-index: -1;
}
/* Current time highlighting */
.box_hourly_weather .item_hourly.current-time {
background: rgba(0, 0, 0, 0.04);
border-radius: 4px;
position: relative;
}
.box_hourly_weather .item_hourly.current-time::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: rgba(59, 130, 246, 0.08);
border: 1px solid rgba(59, 130, 246, 0.2);
border-radius: 6px;
z-index: -1;
}
.box_hourly_weather .item_hourly:hover,
.box_hourly_weather .item_hourly.current-time {
background: rgba(0, 0, 0, 0.04);
transition: background-color 0.2s ease;
}
/* Responsive design */
@media (max-width: 768px) {
.box_hourly_weather .list_hourly .item_hourly {
width: 28px;
}
.box_hourly_weather .fixed_head {
width: 70px;
}
.box_hourly_weather .wrap_scroll {
padding-left: 70px;
}
.box_hourly_weather .fixed_head .tit_data {
padding-left: 6px;
font-size: 0.75em;
}
.box_hourly_weather .list_hourly .txt_data {
font-size: 0.85em;
}
}
@media (max-width: 480px) {
.box_hourly_weather .list_hourly .item_hourly {
width: 24px;
}
.box_hourly_weather .fixed_head {
width: 60px;
}
.box_hourly_weather .wrap_scroll {
padding-left: 60px;
}
.box_hourly_weather .fixed_head .tit_data {
padding-left: 4px;
font-size: 0.7em;
}
.box_hourly_weather .list_hourly .txt_data {
font-size: 0.8em;
}
.box_hourly_weather .wind_arrow {
font-size: 14px;
}
.box_hourly_weather .walking_emoji {
font-size: 16px;
}
}
/* ===== WEEKLY WEATHER COMPONENT ===== */
/* Weekly weather component styles */
.box_weekly_forecast {
background: var(--rover-bg-primary, #ffffff);
border-radius: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
margin: 16px 0;
overflow: hidden;
}
.box_weekly_forecast .slide_box {
margin-top: -10px;
}
.box_weekly_forecast .slide_box .wrap_scroll {
margin: 0;
}
.box_weekly_forecast .flicking-camera {
display: flex;
flex-direction: row;
min-width: max-content;
}
.box_weekly_forecast .flicking-panel {
display: inline-flex;
vertical-align: top;
flex-shrink: 0;
}
.box_weekly_forecast .list_weekly .item_weekly {
display: flex;
flex-direction: column;
align-items: center;
min-width: 110px;
padding: 16px 8px;
text-align: center;
}
.box_weekly_forecast .flicking-panel + .flicking-panel .item_weekly {
border-left: 1px solid rgba(0,0,0,0.04);
}
.box_weekly_forecast .date_weekly {
display: block;
width: auto;
padding: 0;
text-align: center;
margin-bottom: 12px;
}
.box_weekly_forecast .date_weekly .txt_day {
display: block;
padding: 0;
font-weight: 700;
font-size: 1em;
line-height: 1.25;
color: rgba(0,0,0,0.72);
}
.box_weekly_forecast .date_weekly .txt_date {
display: block;
font-size: 0.875em;
line-height: 1.42;
color: rgba(0,0,0,0.48);
}
.box_weekly_forecast .weather_weekly {
display: block;
padding: 10px 8px 0;
margin-bottom: 12px;
}
.box_weekly_forecast .weather_weekly:after {
content: '';
display: block;
clear: both;
}
.box_weekly_forecast .weather_weekly .am_weather,
.box_weekly_forecast .weather_weekly .pm_weather {
display: block;
float: left;
width: 50%;
position: relative;
padding-top: 36px;
text-align: center;
}
.box_weekly_forecast .weather_weekly .tooltip_icon {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 34px;
height: 34px;
}
.box_weekly_forecast .weather_weekly .wcondition_icon {
text-align: left;
}
.box_weekly_forecast .weather_weekly .txt_tooltip {
position: absolute;
z-index: 10;
padding: 4px 8px;
background: rgba(0, 0, 0, 0.8);
color: white;
border-radius: 4px;
font-size: 12px;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s, visibility 0.2s;
pointer-events: none;
}
.box_weekly_forecast .weather_weekly .tooltip_icon:hover .txt_tooltip {
opacity: 1;
visibility: visible;
}
.box_weekly_forecast .weather_weekly .txt_half {
display: block;
font-size: 0.75em;
line-height: 1.2;
color: rgba(0,0,0,0.48);
margin-bottom: 4px;
}
.box_weekly_forecast .weather_weekly .txt_rainfall {
min-width: 40px;
margin: 0;
font-size: 0.875em;
line-height: 1.43;
color: #4881F7;
}
.box_weekly_forecast .temp_weekly {
display: flex;
justify-content: center;
width: auto;
padding: 12px 0 0 0;
text-align: left;
}
.box_weekly_forecast .temp_weekly .item_temp {
flex-shrink: 0;
}
.box_weekly_forecast .temp_weekly .item_temp + .item_temp::before {
float: left;
font-size: 1em;
line-height: 1.25;
color: rgba(0,0,0,0.48);
vertical-align: top;
content: '/';
}
.box_weekly_forecast .temp_weekly .num_deg {
float: left;
font-weight: 700;
font-size: 1em;
line-height: 1.25;
}
/* Weather condition icons - using emoji instead of background images */
.box_weekly_forecast .ico_wcondition {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
font-size: 18px;
position: relative;
color: transparent;
overflow: hidden;
}
.box_weekly_forecast .ico_wcondition::before {
position: absolute;
color: initial;
font-size: 18px;
line-height: 1;
}
.box_weekly_forecast .ico_wcondition.ico_wc1::before { content: "☀️"; }
.box_weekly_forecast .ico_wcondition.ico_wc2::before { content: "⛅"; }
.box_weekly_forecast .ico_wcondition.ico_wc3::before { content: "☁️"; }
.box_weekly_forecast .ico_wcondition.ico_wc4::before { content: "☁️"; }
.box_weekly_forecast .ico_wcondition.ico_wc5::before { content: "🌤️"; }
.box_weekly_forecast .ico_wcondition.ico_wc6::before { content: "🌧️"; }
.box_weekly_forecast .ico_wcondition.ico_wc7::before { content: "🌦️"; }
.box_weekly_forecast .ico_wcondition.ico_wc8::before { content: "⛈️"; }
.box_weekly_forecast .ico_wcondition.ico_wc9::before { content: "🌧️"; }
.box_weekly_forecast .ico_wcondition.ico_wc10::before { content: "⛈️"; }
.box_weekly_forecast .ico_wcondition.ico_wc11::before { content: "💨"; }
.box_weekly_forecast .ico_wcondition.ico_wc12::before { content: "🌪️"; }
.box_weekly_forecast .ico_wcondition.ico_wc13::before { content: "🌫️"; }
.box_weekly_forecast .ico_wcondition.ico_wc14::before { content: "🌫️"; }
/* Horizontal scrolling functionality */
.box_weekly_forecast .flicking-viewport {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.box_weekly_forecast .flicking-viewport::-webkit-scrollbar {
display: none;
}
/* Provider info styling */
.box_weekly_forecast .info_cp {
padding: 16px 20px;
border-top: 1px solid var(--rover-border-light, rgba(0,0,0,0.04));
font-size: 0.875em;
color: var(--rover-text-tertiary, rgba(0,0,0,0.48));
}
/* Air Quality Component (box_airinfo_local) */
.box_airinfo_local .tabg_wrap {
padding: 16px 0;
}
.box_airinfo_local .tab_g {
position: relative;
}
.box_airinfo_local .flicking-viewport {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.box_airinfo_local .flicking-viewport::-webkit-scrollbar {
display: none;
}
.box_airinfo_local .flicking-camera {
display: flex;
flex-direction: row;
min-width: max-content;
}
.box_airinfo_local .flicking-panel {
display: inline-flex;
vertical-align: top;
flex-shrink: 0;
}
.box_airinfo_local .item_tab {
padding: 0 8px;
}
.box_airinfo_local .link_tab {
display: block;
padding: 8px 16px;
border: 1px solid var(--rover-border-light, rgba(0,0,0,0.04));
border-radius: 20px;
background: var(--rover-bg-main, #FFFFFF);
color: var(--rover-text-secondary, rgba(0,0,0,0.72));
text-decoration: none;
font-size: 0.875em;
line-height: 1.43;
white-space: nowrap;
transition: all 0.2s ease;
}
.box_airinfo_local .link_tab:hover,
.box_airinfo_local .link_tab.active {
background: var(--rover-blue-accent, #3b82f6);
color: white;
border-color: var(--rover-blue-accent, #3b82f6);
}
.box_airinfo_local .tab_btn {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.box_airinfo_local .btn_tabnext {
width: 32px;
height: 32px;
border: none;
border-radius: 50%;
background: var(--rover-bg-secondary, rgba(0,0,0,0.04));
cursor: pointer;
}
.box_airinfo_local .hourly_airinfo {
padding: 16px 20px;
}
.box_airinfo_local .now_airinfo {
display: flex;
align-items: center;
height: 42px;
padding: 0 20px;
border-radius: 30px;
margin-bottom: 16px;
}
.box_airinfo_local .now_airinfo.stat_bg1 { background: #328AF6; }
.box_airinfo_local .now_airinfo.stat_bg2 { background: #00A864; }
.box_airinfo_local .now_airinfo.stat_bg4 { background: #F06D20; }
.box_airinfo_local .now_airinfo.stat_bg5 { background: #F8334A; }
.box_airinfo_local .now_airinfo .txt_now,
.box_airinfo_local .now_airinfo .txt_num,
.box_airinfo_local .now_airinfo .txt_unit {
color: #fff;
}
.box_airinfo_local .now_airinfo .txt_now {
font-size: 0.875em;
line-height: 1.42;
}
.box_airinfo_local .now_airinfo .txt_num {
margin: 0 auto;
font-weight: 700;
font-size: 1em;
line-height: 1.25;
}
.box_airinfo_local .now_airinfo .num_now {
margin-left: 5px;
font-size: 1.125em;
}
.box_airinfo_local .now_airinfo .txt_unit {
font-size: 0.813em;
line-height: 1.53;
}
.box_airinfo_local .wrap_chart {
position: relative;
margin-top: 10px;
padding-left: 40px;
}
.box_airinfo_local .index_chart {
position: absolute;
top: 0;
left: 0;
right: 0;
}
.box_airinfo_local .list_index {
display: flex;
flex-direction: column-reverse;
height: 132px;
margin: 0;
padding: 0;
list-style: none;
}
.box_airinfo_local .list_index li {
display: flex;
align-items: center;
flex: 1;
position: relative;
margin-bottom: 1px;
}
.box_airinfo_local .list_index li:after {
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 1px;
background: #000;
opacity: 0.04;
content: '';
}
.box_airinfo_local .list_index li:first-child:after {
opacity: 0.1;
}
.box_airinfo_local .list_index .txt_index {
display: block;
font-weight: 700;
font-size: 0.875em;
line-height: 1.42;
}
.box_airinfo_local .txt_index.stat_txt1 { color: #328AF6; }
.box_airinfo_local .txt_index.stat_txt2 { color: #00A864; }
.box_airinfo_local .txt_index.stat_txt4 { color: #F06D20; }
.box_airinfo_local .txt_index.stat_txt5 { color: #F8334A; }
.box_airinfo_local .list_chart {
display: flex;
position: relative;
z-index: 1;
margin: 0;
padding: 0;
list-style: none;
}
.box_airinfo_local .list_chart li {
display: flex;
flex-direction: column-reverse;
flex: 1;
}
.box_airinfo_local .list_chart .tit_chart {
padding-top: 4px;
font-weight: 400;
font-size: 0.875em;
line-height: 1.14;
color: rgba(0,0,0,0.48);
text-align: center;
}
.box_airinfo_local .list_chart .wrap_bar {
display: flex;
justify-content: center;
align-items: flex-end;
position: relative;
height: 132px;
}
.box_airinfo_local .list_chart .bar_chart {
width: 6px;
border-radius: 10px 10px 0 0;
}
.box_airinfo_local .list_chart .bar_chart.stat_bg1 { background: #328AF6; }
.box_airinfo_local .list_chart .bar_chart.stat_bg2 { background: #00A864; }
.box_airinfo_local .list_chart .bar_chart.stat_bg4 { background: #F06D20; }
.box_airinfo_local .list_chart .bar_chart.stat_bg5 { background: #F8334A; }
.box_airinfo_local .list_chart li:first-child .tit_chart {
font-weight: 700;
color: #000;
}
.box_airinfo_local .info_cp {
padding: 16px 20px;
border-top: 1px solid var(--rover-border-light, rgba(0,0,0,0.04));
font-size: 0.875em;
color: var(--rover-text-secondary, rgba(0,0,0,0.76));
}
/* Activities Component (box_livingdata) */
.box_livingdata .slide_box {
margin-top: -10px;
}
.box_livingdata .slide_box .wrap_scroll {
margin: 0;
}
.box_livingdata .list_livingdata {
display: flex;
vertical-align: top;
}
.box_livingdata .flicking-viewport {
padding: 0 21px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.box_livingdata .flicking-viewport::-webkit-scrollbar {
display: none;
}
.box_livingdata .flicking-camera {
display: flex;
flex-direction: row;
min-width: max-content;
}
.box_livingdata .flicking-panel {
display: inline-flex;
vertical-align: top;
flex-shrink: 0;
}
.box_livingdata .flicking-panel + .flicking-panel {
margin-left: 14px;
}
.box_livingdata [class*="item_stage"] {
display: flex;
flex-shrink: 0;
flex-direction: column;
align-items: center;
position: relative;
width: 94px;
}
.box_livingdata .living_chart {
position: relative;
width: 78px;
height: 60px;
background: var(--rover-bg-secondary, rgba(0,0,0,0.04));
border-radius: 8px;
margin-bottom: 8px;
}
.box_livingdata .txt_name {
font-size: 0.875em;
line-height: 1.43;
color: var(--rover-text-primary, #000);
text-align: center;
margin-bottom: 4px;
}
.box_livingdata .txt_stage {
font-size: 0.75em;
line-height: 1.33;
font-weight: 700;
text-align: center;
}
.box_livingdata .item_stage1 .txt_stage { color: #328AF6; }
.box_livingdata .item_stage2 .txt_stage { color: #00A864; }
.box_livingdata .item_stage3 .txt_stage { color: #00A864; }
.box_livingdata .item_stage4 .txt_stage { color: #F06D20; }
.box_livingdata .item_stage5 .txt_stage { color: #F8334A; }
.box_livingdata .btn_slide {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px;
border: none;
border-radius: 50%;
background: var(--rover-bg-secondary, rgba(0,0,0,0.04));
cursor: pointer;
z-index: 2;
}
.box_livingdata .info_cp {
padding: 16px 20px;
border-top: 1px solid var(--rover-border-light, rgba(0,0,0,0.04));
font-size: 0.875em;
color: var(--rover-text-secondary, rgba(0,0,0,0.76));
}
.box_weekly_forecast .info_cp .link_cp {
color: var(--rover-text-secondary, rgba(0,0,0,0.72));
text-decoration: none;
}
.box_weekly_forecast .info_cp .txt_time {
margin-left: 8px;
}
/* Dark mode support */
html.dark .box_weekly_forecast,
body.dark .box_weekly_forecast {
background: var(--rover-bg-dark, #202124);
border-color: var(--rover-border-dark, rgba(255,255,255,0.04));
}
html.dark .box_weekly_forecast .list_weekly .item_weekly,
body.dark .box_weekly_forecast .list_weekly .item_weekly {
border-color: var(--rover-border-dark, rgba(255,255,255,0.04));
}
html.dark .box_weekly_forecast .date_weekly .txt_day,
body.dark .box_weekly_forecast .date_weekly .txt_day {
color: var(--rover-text-primary-dark, #e8eaed);
}
html.dark .box_weekly_forecast .date_weekly .txt_date,
body.dark .box_weekly_forecast .date_weekly .txt_date {
color: var(--rover-text-secondary-dark, #9aa0a6);
}
html.dark .box_weekly_forecast .temp_weekly .num_deg,
body.dark .box_weekly_forecast .temp_weekly .num_deg {
color: var(--rover-text-primary-dark, #e8eaed);
}
html.dark .box_weekly_forecast .temp_weekly .item_temp + .item_temp::before,
body.dark .box_weekly_forecast .temp_weekly .item_temp + .item_temp::before {
color: var(--rover-text-secondary-dark, #9aa0a6);
}
html.dark .box_weekly_forecast .info_cp,
body.dark .box_weekly_forecast .info_cp {
border-color: var(--rover-border-dark, rgba(255,255,255,0.04));
color: var(--rover-text-secondary-dark, #9aa0a6);
}
html.dark .box_weekly_forecast .info_cp .link_cp,
body.dark .box_weekly_forecast .info_cp .link_cp {
color: var(--rover-text-primary-dark, #e8eaed);
}
/* Dark mode support for Air Quality Component */
html.dark .box_airinfo_local .link_tab,
body.dark .box_airinfo_local .link_tab {
background: var(--rover-bg-dark, #1C1E21);
color: var(--rover-text-primary-dark, #e8eaed);
border-color: var(--rover-border-dark, rgba(255,255,255,0.04));
}
html.dark .box_airinfo_local .link_tab:hover,
html.dark .box_airinfo_local .link_tab.active,
body.dark .box_airinfo_local .link_tab:hover,
body.dark .box_airinfo_local .link_tab.active {
background: var(--rover-blue-accent, #3b82f6);
color: white;
border-color: var(--rover-blue-accent, #3b82f6);
}
html.dark .box_airinfo_local .btn_tabnext,
body.dark .box_airinfo_local .btn_tabnext {
background: var(--rover-bg-dark-secondary, rgba(255,255,255,0.04));
}
html.dark .box_airinfo_local .list_index li:after,
body.dark .box_airinfo_local .list_index li:after {
background: #fff;
}
html.dark .box_airinfo_local .list_chart .tit_chart,
body.dark .box_airinfo_local .list_chart .tit_chart {
color: rgba(255,255,255,0.48);
}
html.dark .box_airinfo_local .list_chart li:first-child .tit_chart,
body.dark .box_airinfo_local .list_chart li:first-child .tit_chart {
color: #fff;
}
html.dark .box_airinfo_local .info_cp,
body.dark .box_airinfo_local .info_cp {
color: var(--rover-text-secondary-dark, #9aa0a6);
}
/* Dark mode support for Activities Component */
html.dark .box_livingdata .living_chart,
body.dark .box_livingdata .living_chart {
background: var(--rover-bg-dark-secondary, rgba(255,255,255,0.04));
}
html.dark .box_livingdata .txt_name,
body.dark .box_livingdata .txt_name {
color: var(--rover-text-primary-dark, #e8eaed);
}
html.dark .box_livingdata .btn_slide,
body.dark .box_livingdata .btn_slide {
background: var(--rover-bg-dark-secondary, rgba(255,255,255,0.04));
}
html.dark .box_livingdata .info_cp,
body.dark .box_livingdata .info_cp {
color: var(--rover-text-secondary-dark, #9aa0a6);
}
/* Dark Mode Toggle Component */
.kp-dark-mode-toggle {
color: #FFF;
transition: all 0.2s ease;
}
.kp-dark-mode-toggle:hover {
background-color: rgba(244, 246, 248, 0.4) !important;
color: #FFF;
}
html.dark .kp-dark-mode-toggle,
body.dark .kp-dark-mode-toggle {
color: var(--rover-text-primary-dark, #FFF);
}
html.dark .kp-dark-mode-toggle:hover,
body.dark .kp-dark-mode-toggle:hover {
background-color: rgba(244, 246, 248, 0.4) !important;
color: var(--rover-text-primary-dark, #FFF);
}
/* Ensure SVG icons inherit color */
.kp-dark-mode-toggle .moon-icon svg,
.kp-dark-mode-toggle .sun-icon svg {
color: inherit;
}
/* Prevent flash of unstyled content */
html.dark {
background-color: var(--rover-bg-dark, #141517) !important;
color: var(--rover-text-primary-dark, #FFF) !important;
}
/* Responsive design */
@media (max-width: 768px) {
.box_weekly_forecast .date_weekly {
width: 20%;
padding-right: 3px;
}
.box_weekly_forecast .temp_weekly {
width: 20%;
padding-left: 3px;
}
.box_weekly_forecast .date_weekly .txt_day {
font-size: 0.9em;
}
.box_weekly_forecast .date_weekly .txt_date {
font-size: 0.8em;
}
.box_weekly_forecast .weather_weekly .txt_rainfall {
min-width: 35px;
font-size: 0.8em;
}
.box_weekly_forecast .temp_weekly .num_deg {
font-size: 0.9em;
}
}
@media (max-width: 480px) {
.box_weekly_forecast .list_weekly .item_weekly {
height: 48px;
}
.box_weekly_forecast .date_weekly {
width: 18%;
padding-right: 2px;
}
.box_weekly_forecast .temp_weekly {
width: 18%;
padding-left: 2px;
}
.box_weekly_forecast .date_weekly .txt_day {
font-size: 0.85em;
}
.box_weekly_forecast .date_weekly .txt_date {
font-size: 0.75em;
}
.box_weekly_forecast .weather_weekly .tooltip_icon {
width: 28px;
height: 28px;
}
.box_weekly_forecast .ico_wcondition {
width: 28px;
height: 28px;
}
.box_weekly_forecast .weather_weekly .txt_rainfall {
min-width: 30px;
font-size: 0.75em;
}
.box_weekly_forecast .temp_weekly .num_deg {
font-size: 0.85em;
}
.box_weekly_forecast .am_weather {
margin-right: 8px;
}
}
.box_hourly_weather .fixed_head {
background: var(--rover-bg-primary, #fff);
border-right: 1px solid var(--rover-border-light, rgba(0,0,0,0.04));
}
.box_hourly_weather .list_hourly .item_hourly {
border-left: 1px solid var(--rover-border-light, rgba(0,0,0,0.04));
}
.box_hourly_weather .list_hourly .txt_data {
color: var(--rover-text-primary, #000);
}
.box_hourly_weather .list_hourly .data_time {
color: var(--rover-text-secondary, rgba(0,0,0,0.76));
}
.box_hourly_weather .fixed_head .tit_data {
color: var(--rover-text-secondary, rgba(0,0,0,0.76));
border-right: 1px solid var(--rover-border-light, rgba(0,0,0,0.04));
}
.box_hourly_weather .fixed_head .txt_unit {
color: var(--rover-text-tertiary, rgba(0,0,0,0.48));
}
/* Provider logo styles */
.box_hourly_weather .info_cp .provider-logo {
vertical-align: middle;
margin: 0 8px 0 4px;
}
/* Dog walking toggle styles */
.box_hourly_weather .wrap_util {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
border-top: 1px solid var(--rover-border-light, rgba(0,0,0,0.04));
}
.box_hourly_weather .info_cp {
display: flex;
align-items: center;
font-size: 0.875em;
color: var(--rover-text-secondary, rgba(0,0,0,0.6));
}
.box_hourly_weather .info_cp .tit_cp {
margin-right: 4px;
}
.box_hourly_weather .info_cp .txt_time {
margin-left: 8px;
color: var(--rover-text-tertiary, rgba(0,0,0,0.48));
}
.box_hourly_weather .util_switch {
display: flex;
align-items: center;
}
.box_hourly_weather .btn_switch {
display: flex;
align-items: center;
background: none;
border: none;
cursor: pointer;
font-size: 0.875em;
color: var(--rover-text-primary, #000);
padding: 8px 12px;
border-radius: 20px;
transition: all 0.2s ease;
}
.box_hourly_weather .btn_switch:hover {
background: var(--rover-bg-secondary, rgba(0,0,0,0.04));
}
.box_hourly_weather .bg_switch {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
margin-right: 8px;
position: relative;
overflow: hidden;
}
.box_hourly_weather .ico_switch {
width: 20px;
height: 20px;
position: absolute;
transition: opacity 0.2s ease;
}
.box_hourly_weather .ico_switch.active {
opacity: 1;
}
.box_hourly_weather .ico_switch.light,
.box_hourly_weather .ico_switch.dark {
opacity: 0;
}
.box_hourly_weather .txt_switch {
font-weight: 500;
}
/* Dark mode support */
html.dark .box_hourly_weather,
body.dark .box_hourly_weather {
background: var(--rover-bg-dark, #1C1E21);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
html.dark .box_hourly_weather .slide_box,
body.dark .box_hourly_weather .slide_box {
border-color: var(--rover-border-dark, rgba(255,255,255,0.16));
}
html.dark .box_hourly_weather .fixed_head,
body.dark .box_hourly_weather .fixed_head {
background: var(--rover-bg-dark, #1C1E21);
border-color: var(--rover-border-dark, rgba(255,255,255,0.04));
}
html.dark .box_hourly_weather .fixed_head .tit_data,
body.dark .box_hourly_weather .fixed_head .tit_data {
color: var(--rover-text-primary-dark, rgba(255,255,255,0.72));
border-color: var(--rover-border-dark, rgba(255,255,255,0.04));
}
html.dark .box_hourly_weather .fixed_head .txt_unit,
body.dark .box_hourly_weather .fixed_head .txt_unit {
color: var(--rover-text-secondary-dark, rgba(255,255,255,0.48));
}
html.dark .box_hourly_weather .list_hourly .item_hourly,
body.dark .box_hourly_weather .list_hourly .item_hourly {
background: rgba(0, 0, 0, 0.04);
border-color: var(--rover-border-dark, rgba(255,255,255,0.04));
}
html.dark .box_hourly_weather .list_hourly .item_hourly:hover,
body.dark .box_hourly_weather .list_hourly .item_hourly:hover {
background: rgba(0, 0, 0, 0.04);
box-shadow: 0 4px 8px rgba(33, 150, 243, 0.2);
border-color: var(--rover-border-dark, rgba(255,255,255,0.04));
}
html.dark .box_hourly_weather .list_hourly .data_time,
body.dark .box_hourly_weather .list_hourly .data_time {
color: var(--rover-text-primary-dark, rgba(255,255,255,0.72));
}
html.dark .box_hourly_weather .list_hourly .txt_data,
body.dark .box_hourly_weather .list_hourly .txt_data {
color: var(--rover-text-primary-dark, #fff);
}
/* Dark mode logo swapping */
html.dark .box_hourly_weather .provider-logo,
body.dark .box_hourly_weather .provider-logo {
content: url("https://roverkorea.com/wp-content/uploads/sites/15/2025/09/weatherornot-logo-white.svg");
}
/* Dark mode for utility section */
html.dark .box_hourly_weather .wrap_util,
body.dark .box_hourly_weather .wrap_util {
border-color: var(--rover-border-dark, rgba(255,255,255,0.04));
}
html.dark .box_hourly_weather .info_cp,
body.dark .box_hourly_weather .info_cp {
color: var(--rover-text-secondary-dark, rgba(255,255,255,0.6));
}
html.dark .box_hourly_weather .info_cp .txt_time,
body.dark .box_hourly_weather .info_cp .txt_time {
color: var(--rover-text-secondary-dark, rgba(255,255,255,0.48));
}
html.dark .box_hourly_weather .btn_switch,
body.dark .box_hourly_weather .btn_switch {
color: var(--rover-text-primary-dark, #fff);
}
html.dark .box_hourly_weather .btn_switch:hover,
body.dark .box_hourly_weather .btn_switch:hover {
background: var(--rover-bg-darker, rgba(255,255,255,0.04));
}
/* ================================
WEEKLY WEATHER RESPONSIVE STYLES
================================ */
/* Tablet Responsive Styles */
@media (max-width: 768px) {
.box_weekly_forecast .list_weekly .item_weekly {
min-width: 120px;
padding: 16px 8px;
}
.box_weekly_forecast .date_weekly {
min-height: 40px;
margin-bottom: 8px;
}
.box_weekly_forecast .date_weekly .txt_day {
font-size: 0.875em;
line-height: 1.1;
}
.box_weekly_forecast .date_weekly .txt_date {
font-size: 0.75em;
line-height: 1.1;
}
.box_weekly_forecast .weather_weekly {
gap: 6px;
margin-bottom: 12px;
}
.box_weekly_forecast .weather_weekly .am_weather,
.box_weekly_forecast .weather_weekly .pm_weather {
gap: 3px;
}
.box_weekly_forecast .ico_wcondition {
width: 28px;
height: 28px;
font-size: 16px;
}
.box_weekly_forecast .ico_wcondition::before {
font-size: 16px;
}
.box_weekly_forecast .weather_weekly .txt_half {
font-size: 0.6875em;
line-height: 1.1;
}
.box_weekly_forecast .weather_weekly .txt_rainfall {
font-size: 0.8125em;
line-height: 1.1;
}
.box_weekly_forecast .temp_weekly {
min-height: 24px;
gap: 4px;
}
.box_weekly_forecast .temp_weekly .num_deg {
font-size: 1em;
line-height: 1.1;
}
.box_weekly_forecast .temp_weekly .item_temp + .item_temp::before {
font-size: 0.875em;
line-height: 1.1;
}
}
/* Mobile Responsive Styles */
@media (max-width: 480px) {
.box_weekly_forecast .list_weekly .item_weekly {
min-width: 100px;
padding: 12px 6px;
}
.box_weekly_forecast .date_weekly {
min-height: 36px;
margin-bottom: 6px;
}
.box_weekly_forecast .date_weekly .txt_day {
font-size: 0.8125em;
line-height: 1.0;
}
.box_weekly_forecast .date_weekly .txt_date {
font-size: 0.6875em;
line-height: 1.0;
}
.box_weekly_forecast .weather_weekly {
gap: 4px;
margin-bottom: 10px;
}
.box_weekly_forecast .weather_weekly .am_weather,
.box_weekly_forecast .weather_weekly .pm_weather {
gap: 2px;
}
.box_weekly_forecast .ico_wcondition {
width: 24px;
height: 24px;
font-size: 14px;
}
.box_weekly_forecast .ico_wcondition::before {
font-size: 14px;
}
.box_weekly_forecast .weather_weekly .txt_half {
font-size: 0.625em;
line-height: 1.0;
}
.box_weekly_forecast .weather_weekly .txt_rainfall {
font-size: 0.75em;
line-height: 1.0;
}
.box_weekly_forecast .temp_weekly {
min-height: 20px;
gap: 3px;
}
.box_weekly_forecast .temp_weekly .num_deg {
font-size: 0.9375em;
line-height: 1.0;
}
.box_weekly_forecast .temp_weekly .item_temp + .item_temp::before {
font-size: 0.8125em;
line-height: 1.0;
}
}/* End custom CSS */