/* main.css - Functional naming version */

/********** Base Color Variables (for h4/b4/n4.css) **********/
:root {
    --f-white: #FFFFFF;
    --f-white-a: #AAAAAA;
    --f-white-b: #BBBBBB;
    --f-white-c: #CCCCCC;
    --f-white-d: #DDDDDD;
    --f-white-e: #EEEEEE;
    --f-black: #000000;
    --f-black-2: #222222;
    --f-black-3: #333333;
    --f-black-4: #444444;
    --f-black-5: #555555;
    --f-black-6: #666666;
    --f-black-9: #999999;
    --e-primary-color: #117e96;
}

/********** Light Theme Variables **********/
:root[app-theme='light'],
:root {
    --m-primary-color: #117e96;
    --m-primary-gradient: linear-gradient(135deg, #13aeab 0%, #117e96 75%);
    --m-bg-primary: #EEEEEE;
    --m-bg-primary: #FFFFFF;
    --m-bg-secondary: #CCCCCC;
    --m-bg-secondary: #EEEEEE;
    /*--m-bg-content: #FFFFFF;*/
    --m-bg-content: #EEEEEE;
    --m-text-primary: #222222;
    --m-text-secondary: #666666;
    /*--m-text-muted: #999999;*/
    --m-text-muted: #666666;
    --m-border-color: #999999;
    --m-border-light: #CCCCCC;
    --m-header-border: #518f9d;
    --m-header-vl: #ccc;
    --m-dropdown-shadow: 0 4px 4px rgba(0, 0, 0, 0.1), 0 1px 8px rgba(0, 0, 0, 0.05), 0 3px 20px rgba(0, 0, 0, 0.1);
    --m-menu-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 1px 8px rgba(0, 0, 0, 0.05), 0 3px 20px rgba(0, 0, 0, 0.1);
}

/********** Dark Theme Variables **********/
:root[app-theme='dark'] {
    --m-primary-color: #117e96;
    --m-primary-gradient: linear-gradient(135deg, #13aeab 0%, #117e96 75%);
    --m-bg-primary: #111827;
    --m-bg-primary: #000000;
    --m-bg-secondary: #1f2937;
    --m-bg-secondary: #111111;
    --m-bg-content: #1a1a1a;
    --m-text-primary: #EEEEEE;
    --m-text-secondary: #BBBBBB;
    /*--m-text-muted: #888888;*/
    --m-text-muted: #CCCCCC;
    --m-border-color: #3a3a3a;
    --m-border-light: #444444;
    --m-header-border: #518f9d;
    --m-header-vl: #444;
    /*--m-dropdown-shadow: 0 4px 32px #000;
    --m-menu-shadow: 0 2px 10px 0 #000;*/
    --m-dropdown-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 1px 8px rgba(0, 0, 0, 0.05), 0 3px 20px rgba(0, 0, 0, 0.1);
    --m-menu-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 1px 8px rgba(0, 0, 0, 0.05), 0 3px 20px rgba(0, 0, 0, 0.1);
}
/********** Base Styles **********/
body{
    color: var(--m-text-primary);
    background-color: var(--m-bg-primary);
}
a{
    color: inherit;
    text-decoration: inherit;
}
label:focus, label:active, i:focus, i:active{
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    user-select: none;
}
.dropdown, .menu-content{
    outline: none !important;
    background-color: var(--m-bg-content) !important;
}

/* ========== Header ========== */
.header{
    height:84px;
    width:100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index:1050;
}

/* Header Top Bar */
.header-top{
    height:44px;
    background-color: var(--m-primary-color);
    color: #EEEEEE;
    z-index:1010;
}
.header-inner{
    width:1400px;
    margin:0 auto;
}
.header-content{
    padding:.5rem 0;
}

/* Logo */
.logo-link{
    padding:0 1rem;
}

/* ========== Search ========== */
.search-wrap{
    width:100%;
}
.search-box{
    background: var(--m-primary-gradient);
    z-index:1050;
}
.search-close-wrap{
    display:none;
}
.search-input{
    padding:.5rem;
    font-size:.875rem;
    background-color: #EEEEEE;
    color: #000000;
    border-radius:.25rem 0 0 .25rem;
}
.search-btn{
    color: var(--f-black-6);
    padding:0 0.875rem;
    background-color: #EEEEEE;
    border-radius: 0 .25rem .25rem 0;
}
.search-btn:active{
    color: var(--m-text-muted);
}
.search-close{
    padding:0 1rem;
}

/* Search Area */
.search-area{
    height:100%;
}
.search-area .btn-wrap:last-child{
    display:none;
}

/* Header Button */
.btn-wrap.border-r{
    border-right: 1px solid var(--m-header-border);
}

/* Theme Icon - Toggle fa-sun/fa-moon via JS */

/* Button Label */
.btn-label *{
    pointer-events:none;
}
.btn-label{
    min-width:3rem;
    padding:0 1rem;
    text-decoration:none;
}
.btn-label:active{
    color: var(--m-text-muted);
}

/* Nav Link */
.nav-link{
    min-width:3rem;
    padding:0 1rem;
    color:inherit;
    text-decoration:none;
}

/* Dropdown Arrow */
.dropdown-arrow{
    padding-top:1px;
    font-weight:bold;
}

/* Username */
.username{
    display:block;
}

/* ========== Menu Bar ========== */
.menu-container{
    width:1400px;
    margin:0 auto;
}
.menu-bar{
    background-color: var(--m-bg-content);
    color: var(--m-text-primary);
    border-bottom: 1px solid var(--m-border-color);
    position: fixed;
    top: 44px;
    height: 40px;
    box-shadow: var(--m-menu-shadow);
    z-index: 1001 !important;
    transition: box-shadow 0.5s ease, filter 0.5s ease;
}
.menu-btns{
    padding:0.5rem 0;
}
.menu-title{
    padding:0 1rem;
    font-weight:bold;
    display:none;
}
.menu-actions{
    width:100%;
}
#Menu-slide ~label,#Menu-lists ~label{
    display:none;
}

/* Menu Content */
.menu-heading{
    padding:0 1rem;
    font-weight:bold;
    display:none;
}
.sort-icon{
    padding-top:2px;
}

/* Menu Link */
.menu-link{
    padding:0.5rem 1rem;
    display:block;
    color:inherit;
    text-align:center;
    white-space:nowrap;
    text-decoration:none;
    border-radius:.5rem;
}
.menu-link.selected{
    color: var(--m-primary-color) !important;
    text-decoration:none !important;
    font-weight:bold;
}

/* Menu Icon */
.menu-icon{
    display:none;
}

/* ========== Overlay ========== */
.overlay{
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#000;
    opacity:0;
    z-index:10;
    display:none;
}

/* ========== Dropdown ========== */
#Menu-i18n ~.dropdown, #Menu-user ~.dropdown, #Menu-Sorts ~.dropdown {
    box-shadow: var(--m-dropdown-shadow);
}
.dropdown-inner{
    max-width:960px;
    /*background-color: var(--m-bg-content) !important;*/
    display: flex;
    flex-direction: column;
    color: var(--m-text-primary);
    font-size:.875rem;
    border-radius:0.25rem;
}
.dropdown-item{
    width:100%;
    text-align:center;
}

/* Unread Message Indicator */
.user-icon-wrap{
    position:relative;
    display:inline-flex;
}
.unread-dot{
    position:absolute;
    top:-2px;
    right:-4px;
    width:8px;
    height:8px;
    background-color:#ef4444;
    border-radius:50%;
    animation:pulse 2s infinite;
}
@keyframes pulse{
    0%,100%{opacity:1;}
    50%{opacity:0.5;}
}

/* ========== Main Content ========== */
.main-wrapper{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    background-color: var(--m-bg-primary);
    padding-top:84px;
    padding-bottom:40px;
}
.content-area{
    flex:1;
    background-color: var(--m-bg-secondary);
}
.content-inner{
    max-width:1400px;
    width:100%;
    margin:0 auto;
    display:flex;
}

/* Sidebar Left - Sticky */
.sidebar-left{
    width:30%;
    padding:2rem;
    border-right: 1px solid var(--m-border-color);
    flex-shrink:0;
    position:sticky;
    top:84px;
    height:calc(100vh - 124px);
    overflow-y:auto;
}

/* Sidebar Right - No scroll, body scrolls */
.sidebar-right{
    width:70%;
    padding:2rem;
    min-width:0;
}

/* Footer Fixed */
.site-footer{
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    height:40px;
    z-index:1000;
}

/* ========== Articles List ========== */
.article-thumb{
    width: 154px;
    height: 116px;
}
.article-img{
    display:block;
    width: 100%;
    height: 100%;
    background-color: var(--m-bg-secondary);
}
.article-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.article-title{
    font-size:1rem;
}
.article-meta{
    padding:5px 0;
    font-size:.75rem;
}
.article-summary{
    font-size:.875rem;
}
.text-primary{
    color: var(--m-primary-color);
}


/********** PC (min-width: 768px) **********/
@media screen and (min-width: 768px) {
    .menu-link:hover{
        color: var(--m-primary-color);
        text-decoration:underline;
    }

    #Menu-i18n ~.dropdown,#Menu-user ~.dropdown,#Menu-Sorts ~.dropdown{
        position: absolute;
        top:100%;
        left:50%;
        z-index:1002;
        transition: opacity .4s, transform .1s;
        transform-origin:top;
        opacity:0;
        border-radius:.25rem;
        transform:translateX(-50%) scaleY(0);
    }
    #Menu-i18n:checked ~.dropdown,#Menu-user:checked ~.dropdown,#Menu-Sorts:checked ~.dropdown{
        transform: translateX(-50%) scaleY(1);
        opacity: 1;
    }

    .menu-content{
        height:100%;
    }
    .sort-area{
        width:5rem;
        display:flex;
        height:100%;
        position:relative;
    }
    .sort-wrap{
        width:5rem;
        display:flex;
        justify-content: center;
        align-items: center;
        gap: .25rem;
    }

    .overlay{
        display:none !important;
    }
}

/********** Mobile (max-width: 767px) **********/
@media screen and (max-width:767px){
    .btn-group:last-child {
        box-shadow: none !important;
    }
    .username{
        display:none;
    }
    
    /* Fade out secondary nav when left slide opens */
    .menu-bar.checked{
        box-shadow:none;
    }
    
    /* Search Box */
    .search-box{
        width:100%;
        height:100%;
        padding:.5rem 0 .5rem 1rem;
        position: absolute;
        left: 0;
        right:0;
        top: 0;
        bottom:0;
        opacity:0;
        transform:scaleY(0);
        transition:opacity .2s ease;
    }
    #Menu-search:checked ~ .search-box,
    .search-box:focus-within{
        transform:scaleY(1);
        opacity:1;
    }
    body.search-active .search-box{
        transform:scaleY(1);
        opacity:1;
    }
    #Menu-search:not(:checked) ~ .search-box:not(:focus-within){
        transition: opacity 0.2s ease,transform 0s ease .2s;
    }
    .search-area .btn-wrap:last-child{
        display:flex;
    }
    .search-close-wrap{
        display:flex;
    }

    /* Dropdown */
    #Menu-i18n ~.dropdown,#Menu-user ~.dropdown{
        position: absolute;
        top:100%;
        left:50%;
        z-index:1002;
        transition: opacity .4s, transform .4s;
        transform-origin:top;
        opacity:0;
        border-radius:.25rem;
        box-shadow:0 4px 4px rgba(0, 0, 0, 0.1), 0 1px 8px rgba(0, 0, 0, 0.05), 0 3px 20px rgba(0, 0, 0, 0.1);
        transform:translateX(-50%) scaleY(0);
    }
    #Menu-i18n:checked ~.dropdown,#Menu-user:checked ~.dropdown{
        transform: translateX(-50%) scaleY(1);
        opacity: 1;
    }

    /* Right dropdown */
    #Menu-user ~ .dropdown,#Menu-lists ~.dropdown{
        right:0;
        left:auto;
        transform: translateX(0) scaleY(0);
    }
    #Menu-user:checked ~.dropdown,#Menu-lists:checked ~.dropdown{
        opacity: 1;
        transform: translateX(0) scaleY(1);
    }
    #Menu-Sorts ~.dropdown {
        box-shadow:none;
    }

    /* Menu */
    .menu-container{
        position:relative;
    }
    .menu-title{
        display:flex;
    }
    .menu-actions{
        width:auto;
    }
    #Menu-slide ~label, #Menu-lists ~label {
        display:flex;
    }

    .menu-content{
        flex-direction:column;
        width:100%;
        position:absolute;
        top:40px;
        right:0;
        font-size:.75rem;
        box-shadow: 0 3px 4px rgba(0, 0, 0, 0.1), 0 1px 8px rgba(0, 0, 0, 0.05), 0 2px 20px rgba(0, 0, 0, 0.1);
        word-break: break-all;
        word-wrap: break-word;
        overflow: hidden;
        z-index: 1002;
    }
    .menu-heading{
        width:100%;
        padding: .5rem 1rem;
        text-align: left;
        display: block;
    }
    .menu-list{
        width:100%;
        padding:1rem 0;
        display:grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-gap:.75rem;
    }
    .menu-list .menu-item{
        padding:0;
        min-width:0;
    }
    .menu-list .menu-link{
        width:100%;
        min-width:0;
        min-height:34px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        white-space:normal;
        overflow-wrap:anywhere;
        word-break:break-word;
        line-height:1.2;
        text-align:center;
    }
    .menu-list .menu-icon{
        max-width: 32px;
        width: 32px;
        margin: 0;
        padding: 0;
        display:block;
    }
    .sort-area{
        width:100%;
    }
    .sort-btn{
        padding:.5rem 1rem;
        justify-content:left;
    }

    #Menu-Sorts ~ .dropdown .dropdown-inner {
        border-radius:0;
        flex-direction: row;
        padding:0.5rem 0;
    }
    #Menu-Sorts ~ .dropdown .dropdown-item{
        width:auto;
    }

    #Menu-lists ~.menu-content{
        z-index: 1050;
        position: absolute;
        top: 100%;
        right:0;
        transition: opacity .4s, transform .4s;
        transform: scaleY(0);
        transform-origin: top;
        opacity: 0;
        transform: translateX(0) scaleY(0);
        transition: opacity 0.4s, transform 0.4s, box-shadow 0.4s ease, filter 0.4s ease;
    }
    #Menu-lists:checked ~.menu-content{
        opacity:1;
        transform: translateX(0) scaleY(1);
    }

    /* Main Content */
    .content-inner{
        flex-direction:column;
        align-items:stretch;
        min-height:calc(100vh - 124px);
    }
    .content-area{
        flex:1;
        display:flex;
        flex-direction:column;
    }

    /* Sidebar */
    .sidebar-left,.sidebar-right{
        width:100%;
        height:auto;
        position:static;
    }
    .sidebar-right{
        padding:1rem;
        flex:1;
    }

    /* Disable body scroll when slide panel opens */
    body.slide-open{
        overflow:hidden;
        position:fixed;
        width:100%;
    }
    
    /* Slide Panel */
    .slide-panel{
        width:80%;
        min-width:300px;
        padding:1rem;
        height:calc(100% - 124px);
        top:84px;
        position:fixed;
        z-index:999;
        box-shadow:none;
        transition:transform .5s;
        background-color:var(--m-bg-secondary);
    }
    .slide-panel.sidebar-left{
        transform:translate3d(-100%, 0, 0);
    }
    .slide-panel.sidebar-left.checked{
        transform:translate3d(0, 0, 0);
    }
    .slide-panel.sidebar-right{
        left:auto;
        right:0;
        transform:translateX(100%);
    }
    .slide-panel.sidebar-right.checked{
        transform:translateX(0);
    }

    .menu-actions .btn-wrap{
        border-right: 1px solid var(--m-header-border);
        border-right: 1px solid var(--m-header-vl);
    }
    .menu-actions .btn-wrap:last-child{
        border-right: none;
    }
    .menu-heading, .sort-btn{
        border-top: 1px solid var(--m-border-light);
        border-bottom: 1px solid var(--m-border-light);
    }
    #Menu-lists ~.menu-content{
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        clip-path: inset(0 -10px -10px -10px);
    }
}

/* Mobile < 430px */
@media screen and (max-width:430px){
    .menu-content{
        width:100%;
    }
}

/* ========== PhotoSwipe Bottom Thumbnails ========== */
.pswp__thumbs{
    position:absolute;
    bottom:20px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:8px;
    padding:8px;
    background:rgba(0,0,0,0.5);
    border-radius:8px;
    max-width:90%;
    overflow-x:auto;
    z-index:10;
}
.pswp__thumbs img{
    width:60px;
    height:45px;
    object-fit:cover;
    border-radius:4px;
    cursor:pointer;
    opacity:0.6;
    transition:opacity 0.2s;
}
.pswp__thumbs img:hover{
    opacity:0.9;
}
.pswp__thumbs img.active{
    opacity:1;
    outline:2px solid #fff;
}

/********** Logo Text **********/
.logo-text{font-weight:bold}

/********** Article Type Tag (shared across home/bookmark/article/user) **********/
.hr-tag{display:inline-flex;align-items:center;gap:.2rem;font-size:.6rem;font-weight:600;padding:1px 6px;border-radius:3px;letter-spacing:.3px;white-space:nowrap;line-height:1.4}
.hr-tag i{margin-right:0 !important}
.hr-tag-news{color:#c2410c;background:rgba(251,146,60,.12)}
.hr-tag-guide{color:var(--e-primary-color);background:rgba(17,126,150,.1)}
.hr-tag-shopping{color:#0f766e;background:rgba(15,118,110,.12)}
:root[app-theme='dark'] .hr-tag-news{color:#fb923c;background:rgba(251,146,60,.15)}
:root[app-theme='dark'] .hr-tag-guide{color:var(--e-primary-color);background:rgba(17,126,150,.12)}
:root[app-theme='dark'] .hr-tag-shopping{color:#2dd4bf;background:rgba(45,212,191,.16)}
@media(max-width:767px){
    .hr-tag{font-size:0 !important;line-height:1;padding:2px 4px;gap:0;min-width:22px;justify-content:center}
    .hr-tag .hr-tag-text{display:none !important}
    .hr-tag i{font-size:.72rem !important}
}

/********** Username Link - 2024-12-08 **********/
.sr-user{cursor:pointer;transition:color .2s}
.sr-user:hover{color:var(--m-primary-color);text-decoration:underline}

/********** Footer **********/
.site-footer{padding:.5rem 0;border-top:1px solid var(--m-border-light);background:var(--m-bg-content);display:flex;align-items:center;justify-content:center}
.footer-content{display:flex;justify-content:center;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.85rem}
.footer-copyright{color:var(--m-text-muted)}
.footer-content a{color:var(--m-text-secondary);text-decoration:none;transition:color .2s}
.footer-content a:hover{color:var(--m-primary-color)}
.footer-divider{color:var(--m-text-muted)}
@media screen and (max-width:767px){.footer-contact-hide{display:none}}