/*
Theme Name: OneSpotDiary
Description: A travel blog theme for Seoul cafe reviews and travel stories
Version: 1.1
Author: Luna
*/

/* WordPress Theme Styles */
:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --dark-color: #343a40;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
}

/* 네비게이션 기본 스타일 */
.navbar-brand h1 {
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--primary-color) !important;
    margin: 0;
}

/* 모바일 토글 버튼 */
.navbar-toggler {
    border: none;
    padding: 0.25rem 0.5rem;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.blue-middle-circle {
    width: 8px;
    height: 8px;
    margin-top: 0.5rem;
}

.dark-middle-circle {
    width: 4px;
    height: 4px;
}

/* 카드 기본 스타일 */
.card {
    border: 1px solid #e9ecef;
    border-radius: 0.375rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    transition: box-shadow 0.15s ease-in-out;
    overflow: hidden;
}

.card:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.card * {
    box-sizing: border-box !important;
}

/* 카드 이미지 컨테이너 스타일 */
.card > a,
.card > a:first-child,
.card-img-link,
.card > .card-img-link,
.card .card-img-container,
article.card > a,
article.card > a:first-child,
article.card > .card-img-link {
    display: block !important;
    width: 100% !important;
    height: 200px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

/* 카드 이미지 통합 스타일 - 상단에만 border-radius 적용 */
.card img,
.card .wp-post-image,
.card a img,
.card .card-thumbnail,
.card-img-link img,
.card .card-img-container img,
article.card img,
article.card .wp-post-image,
article.card a img,
article.card .card-thumbnail,
article.card .card-img-link img,
.attachment-medium,
.size-medium,
img.wp-post-image,
.card img[width],
.card img[height],
.card img[srcset],
.card .wp-post-image[srcset] {
    width: 100% !important;
    max-width: 100% !important;
    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;
    object-fit: cover !important;
    object-position: center !important;
    background-color: #f8f9fa !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    /* 상단에만 border-radius 적용 */
    aspect-ratio: unset !important;
    box-sizing: border-box !important;
    position: relative !important;
}

/* 카드 콘텐츠 영역 */
.card .p-3 {
    padding: 1rem !important;
    position: relative !important;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    .card > a,
    .card > a:first-child,
    .card-img-link,
    .card > .card-img-link,
    .card .card-img-container,
    article.card > a,
    article.card > a:first-child,
    article.card > .card-img-link {
        height: 180px !important;
    }
    
    .card img,
    .card .wp-post-image,
    .card a img,
    .card .card-thumbnail,
    .card-img-link img,
    .card .card-img-container img,
    article.card img,
    article.card .wp-post-image,
    article.card a img,
    article.card .card-thumbnail,
    article.card .card-img-link img,
    .card .card-img-placeholder,
    article.card .card-img-placeholder,
    .card-img-placeholder {
        height: 180px !important;
        min-height: 180px !important;
        max-height: 180px !important;
    }
    
    .card-img-placeholder i,
    .card-img-placeholder .fas,
    .card-img-placeholder .fa {
        font-size: 1.5rem !important;
    }
    
    .card-img-placeholder:not(:has(i)):not(:has(.fas)):not(:has(.fa))::before {
        font-size: 1.5rem !important;
    }
}

/* 추가: 브라우저 호환성을 위한 대체 스타일 (has() 미지원 브라우저용) */
@supports not (selector(:has(*))) {
    .card-img-placeholder::before {
        content: "📷" !important;
        font-size: 2rem !important;
        color: #6c757d !important;
        display: block !important;
        text-align: center !important;
        line-height: 1 !important;
        margin-bottom: 0.5rem !important;
    }
    
    .card-img-placeholder .fas,
    .card-img-placeholder .fa,
    .card-img-placeholder i {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
    }
    
    .card-img-placeholder .fas + ::before,
    .card-img-placeholder .fa + ::before,
    .card-img-placeholder i + ::before {
        display: none !important;
    }
}

/* WordPress 특정 스타일 오버라이드 */
.wp-post-image.card-img-placeholder {
    object-fit: none !important;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
}


.related-posts {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #dee2e6;
}

.related-post-item {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    transition: box-shadow 0.2s ease;
}

.related-post-item:hover {
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.related-post-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.related-post-meta {
    font-size: 0.9rem;
    color: #6c757d;
    margin-bottom: 0.5rem;
}

.related-post-excerpt {
    font-size: 0.95rem;
    color: #495057;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .related-posts .row {
        margin: 0;
    }
    
    .related-posts .col-md-6 {
        padding: 0 0 1rem 0;
    }
}

/* Blue Ocean design system
   Visual refresh only: keeps the existing WordPress/PHP templates and Bootstrap behavior. */
:root {
    --bos-ocean-950: #073657;
    --bos-ocean-850: #0b4b73;
    --bos-ocean-700: #126895;
    --bos-ocean-500: #1d86b6;
    --bos-ocean-300: #81cddd;
    --bos-ocean-150: #c8eff0;
    --bos-ocean-075: #eaf9f7;
    --bos-sand-100: #fbf7ef;
    --bos-sand-200: #f2e2ca;
    --bos-ink: #183341;
    --bos-muted: #6d8792;
    --bos-white: #ffffff;
    --bos-line: rgba(11, 75, 115, 0.15);
    --bos-shadow-sm: 0 10px 28px rgba(7, 54, 87, 0.09);
    --bos-shadow-md: 0 18px 42px rgba(7, 54, 87, 0.14);
    --bos-radius-xs: 2px;
    --bos-radius-sm: 4px;
    --bos-radius-md: 8px;
    --primary-color: var(--bos-ocean-700);
    --secondary-color: var(--bos-muted);
    --dark-color: var(--bos-ocean-950);
}

html {
    scroll-behavior: smooth;
    color-scheme: light;
}

body {
    background: var(--bos-white);
    color: var(--bos-ink);
    font-family: "Segoe UI", "Noto Sans", "Noto Sans KR", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.72;
}

body,
.site-main,
main {
    background-color: var(--bos-white) !important;
}

a {
    color: var(--bos-ocean-700);
}

a:hover {
    color: var(--bos-ocean-950);
}

.site-header {
    background: rgba(255, 255, 255, 0.96);
    border-top: 5px solid var(--bos-ocean-950);
    border-bottom: 1px solid var(--bos-line);
    box-shadow: 0 8px 22px rgba(7, 54, 87, 0.05);
    position: relative;
    z-index: 20;
}

.site-header .container-fluid,
.site-main .container-fluid,
main .container-fluid {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}

.navbar-brand h1 {
    color: var(--bos-ocean-500) !important;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2rem;
    font-style: italic;
    font-weight: 500 !important;
    letter-spacing: 0;
}

.custom-logo {
    max-height: 58px;
    width: auto;
}

.navbar-nav .nav-link {
    color: var(--bos-ink) !important;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active,
.navbar-nav .current-menu-item .nav-link {
    color: var(--bos-ocean-500) !important;
}

.dropdown-menu {
    border: 1px solid var(--bos-line) !important;
    border-radius: var(--bos-radius-sm);
    box-shadow: var(--bos-shadow-sm) !important;
}

.desktop-lang-switcher,
.mobile-lang-switcher {
    position: relative;
}

.desktop-lang-switcher .dropdown-menu,
.mobile-lang-switcher .dropdown-menu {
    left: 0 !important;
    right: auto !important;
    transform: none !important;
}

.navbar-toggler {
    color: var(--bos-ocean-950);
    min-height: 44px;
    min-width: 44px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--bos-ocean-950);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.18;
}

h2 {
    font-size: clamp(1.7rem, 2vw, 2.45rem);
}

h4 {
    font-size: 1.15rem;
}

.text-primary {
    color: var(--bos-ocean-500) !important;
}

.text-secondary,
.text-muted,
.post-meta {
    color: var(--bos-muted) !important;
}

.bg-primary,
.blue-middle-circle {
    background-color: var(--bos-ocean-500) !important;
}

.blue-middle-circle {
    width: 9px;
    height: 9px;
    box-shadow: 0 0 0 5px rgba(129, 205, 221, 0.2);
}

.btn {
    border-radius: var(--bos-radius-xs);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0;
    min-height: 42px;
    padding: 0.72rem 1.25rem;
    text-transform: uppercase;
}

.btn-primary {
    background-color: var(--bos-ocean-700) !important;
    border-color: var(--bos-ocean-700) !important;
    color: var(--bos-white) !important;
    box-shadow: 0 10px 20px rgba(18, 104, 149, 0.18);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--bos-ocean-950) !important;
    border-color: var(--bos-ocean-950) !important;
    color: var(--bos-white) !important;
    box-shadow: 0 13px 24px rgba(7, 54, 87, 0.2);
}

.site-main > section,
main > section {
    position: relative;
}

.about-section {
    background: linear-gradient(90deg, var(--bos-white) 0 50%, var(--bos-ocean-075) 50% 100%);
}

.blog-section {
    background: var(--bos-white);
}

.category-survival-section,
.related-posts {
    background: var(--bos-ocean-075);
}

.about-section img,
.page-content img,
.entry-content img {
    border: 6px solid var(--bos-white);
    box-shadow: var(--bos-shadow-md);
}

.about-image-placeholder,
.card-img-placeholder {
    background: linear-gradient(135deg, var(--bos-ocean-075), var(--bos-sand-100)) !important;
    color: var(--bos-ocean-700);
}

.card,
article.card,
.related-post-item {
    background: var(--bos-white);
    border: 1px solid var(--bos-line) !important;
    border-radius: var(--bos-radius-sm) !important;
    box-shadow: var(--bos-shadow-sm);
    overflow: hidden;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.card:hover,
article.card:hover,
.related-post-item:hover {
    border-color: rgba(29, 134, 182, 0.35) !important;
    box-shadow: var(--bos-shadow-md) !important;
    transform: translateY(-3px);
}

.card .p-3 {
    padding: 1.2rem !important;
}

.card h4 a,
.related-post-title a {
    color: var(--bos-ocean-950) !important;
}

.card h4 a:hover,
.related-post-title a:hover {
    color: var(--bos-ocean-500) !important;
}

.card .text-secondary:first-child,
.card .p-3 > p.text-secondary:first-child {
    color: var(--bos-ocean-700) !important;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.card > a,
.card > a:first-child,
.card-img-link,
.card > .card-img-link,
.card .card-img-container,
article.card > a,
article.card > a:first-child,
article.card > .card-img-link {
    height: 220px !important;
}

.card img,
.card .wp-post-image,
.card a img,
.card .card-thumbnail,
.card-img-link img,
.card .card-img-container img,
article.card img,
article.card .wp-post-image,
article.card a img,
article.card .card-thumbnail,
article.card .card-img-link img,
.attachment-medium,
.size-medium,
img.wp-post-image,
.card img[width],
.card img[height],
.card img[srcset],
.card .wp-post-image[srcset] {
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
}

.search-input-group {
    border: 1px solid var(--bos-line);
    border-radius: var(--bos-radius-sm) !important;
    box-shadow: var(--bos-shadow-sm) !important;
}

.search-container .form-control {
    border-color: transparent !important;
    color: var(--bos-ink);
}

.search-container .form-control:focus {
    border-color: var(--bos-ocean-300) !important;
    box-shadow: 0 0 0 0.2rem rgba(129, 205, 221, 0.3) !important;
}

mark {
    background-color: var(--bos-sand-200) !important;
    color: var(--bos-ocean-950);
}

.pagination .page-link {
    border-color: var(--bos-line) !important;
    border-radius: var(--bos-radius-xs) !important;
    color: var(--bos-ocean-700) !important;
}

.pagination .page-item.active .page-link {
    background-color: var(--bos-ocean-700) !important;
    border-color: var(--bos-ocean-700) !important;
    color: var(--bos-white) !important;
}

.pagination .page-link:hover {
    background-color: var(--bos-ocean-075) !important;
}

.site-footer {
    background: var(--bos-ocean-950) !important;
    border-top: 8px solid var(--bos-ocean-300);
    color: rgba(255, 255, 255, 0.9) !important;
}

.site-footer a {
    color: rgba(255, 255, 255, 0.92) !important;
}

.site-footer a:hover {
    color: var(--bos-ocean-150) !important;
}

.back-to-top {
    align-items: center;
    background: var(--bos-ocean-700);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    bottom: 1.25rem;
    box-shadow: 0 14px 28px rgba(6, 42, 64, 0.22);
    color: var(--bos-white);
    cursor: pointer;
    display: inline-flex;
    height: 44px;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    right: 1.25rem;
    transform: translateY(10px);
    transition: opacity 180ms ease, transform 180ms ease, background-color 180ms ease;
    width: 44px;
    z-index: 1040;
}

.back-to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.back-to-top:hover,
.back-to-top:focus-visible {
    background: var(--bos-ocean-950);
    color: var(--bos-white);
    outline: none;
}

.back-to-top i {
    font-size: 0.95rem;
    line-height: 1;
}

.subscribe-section {
    display: none !important;
}

@media (max-width: 991.98px) {
    .site-header .container-fluid {
        padding: 1rem !important;
    }

    .navbar-nav .nav-link {
        padding: 0.9rem 0.5rem !important;
    }

    .about-section {
        background: var(--bos-ocean-075);
    }
}

@media (max-width: 768px) {
    h2 {
        font-size: 1.55rem;
    }

    .site-main .container-fluid,
    main .container-fluid {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .card > a,
    .card > a:first-child,
    .card-img-link,
    .card > .card-img-link,
    .card .card-img-container,
    article.card > a,
    article.card > a:first-child,
    article.card > .card-img-link {
        height: 190px !important;
    }

    .card img,
    .card .wp-post-image,
    .card a img,
    .card .card-thumbnail,
    .card-img-link img,
    .card .card-img-container img,
    article.card img,
    article.card .wp-post-image,
    article.card a img,
    article.card .card-thumbnail,
    article.card .card-img-link img,
    .card .card-img-placeholder,
    article.card .card-img-placeholder,
    .card-img-placeholder {
        height: 190px !important;
        min-height: 190px !important;
        max-height: 190px !important;
    }

    .back-to-top {
        bottom: 1rem;
        height: 42px;
        right: 1rem;
        width: 42px;
    }
}