@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-jp-dynamic-subset.min.css");

:root {
    --main-text-color: #111111;
    --background-color: #f2f2f2;
    --title-color: #757577;
    --sub-brand-color: #002f5f;
    --label-color: #f97316;
}
html {
    overflow-x: hidden;
}
html,
body {
    margin: 0px;
    padding: 0px;
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    width: 100vw;
    /* overflow-x: hidden; */
    line-height: 1.3;
    word-break: keep-all;
    color: var(--main-text-color);
    -webkit-font-smoothing: antialiased;
    background-color: var(--background-color);
}
.jp{
    font-family: "Pretendard JP Variable";
}
button {
    font-family: "Pretendard Variable";
}
h1 {
    padding: 0;
    margin: 0;
    font-size: 2rem;
}
h2 {
    padding: 0;
    margin: 0;
    font-size: 1.6rem;
}
h3 {
    padding: 0;
    margin: 0;
    font-size: 1.4rem;
}
h4 {
    padding: 0;
    margin: 0;
    font-size: 1.2rem;
}
a {
    padding: 0;
    margin: 0;
    text-decoration: none;
    font-size: 1rem;
    color: #422ad5;
}
.link:hover{
    text-decoration: underline;
}
p {
    padding: 0;
    margin: 0;
    font-size: 1rem;
}

#header {
    height: 3rem;
}

.main-header {
    background-color: white;
    height: 3rem;
    width: calc(100vw - 2rem);
    position: fixed;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), 0 2px 3px 0 rgba(0, 0, 0, .12);
    z-index: 99999;
    display: flex;
    align-items: center;
    padding: 0 1rem;
    justify-content: space-between;
}
.header-left{
    display: flex;
    align-items: center;
}
.header-right{
    margin-right: 1rem;
}
.header-right a{
    margin-left: 1rem;
    color:var(--title-color);
    text-decoration: none;
    font-weight: 500;
}
.header-right a:hover{
    color: var(--label-color);
}


.hamburger {
    width: 48px;
    height: 48px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    cursor: pointer;
}

.hamburger span {
    width: 24px;
    height: 2px;
    transform-origin: center;
    background: var(--title-color);
    border-radius: 999px;
    margin: 3px 0;
    transition: transform .2s ease, opacity .2s ease;
}

.hamburger.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.hamburger.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

.header-title {
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 1.7rem !important;
    font-weight: 900;
    color: var(--title-color);
    text-decoration: none;
    margin-left: .5rem;
}

.main-hero {
    min-height: 360px;
    padding: 80px 40px;
    display: flex;
    align-items: center;
    background: radial-gradient(circle at 80% 20%, rgba(249, 115, 22, .28), transparent 32%), linear-gradient(135deg, #0f172a 0%, #1e293b 55%, var(--label-color) 140%);
    color: white;
}

.hero-content {
    max-width: 1080px;
    width: 100%;
    margin: 0 auto;
}

.hero-label {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .16em;
    color: #fed7aa;
}

.hero-content h1 {
    margin: 0;
    font-size: clamp(36px, 6vw, 72px);
    line-height: 1.1;
    letter-spacing: -0.04em;
}

.hero-description {
    max-width: 560px;
    margin: 24px 0 0;
    font-size: 18px;
    line-height: 1.7;
    color: #e2e8f0;
}

.hero-buttons {
    margin-top: 1rem;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.hero-btn {
    padding: 14px 20px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.2s;
}

.hero-btn.primary {
    background: var(--label-color);
    color: white;
}

.hero-btn.secondary {
    background: rgba(255, 255, 255, .12);
    color: white;
    border: 1px solid rgba(255, 255, 255, .24);
}

.hero-btn:hover {
    transform: translateY(-3px);
    transition: 0.2s;
}

.side-menu {
    position: fixed;
    top: 3rem;
    left: 0;

    width: 320px;
    height: calc(100vh - 3rem);

    background: #ffffff;
    border-right: 1px solid #e5e7eb;

    transform: translateX(-100%);
    transition: transform .3s ease;

    z-index: 1000;

    overflow-y: auto;
    box-sizing: border-box;
    padding: 1rem;
}

.side-menu.open {
    transform: translateX(0);
}

.menu-overlay {
    position: fixed;
    top: 3rem;
    left: 0;

    width: 100%;
    height: calc(100vh - 3rem);

    background: rgba(15, 23, 42, .35);

    opacity: 0;
    pointer-events: none;

    transition: opacity .3s ease;

    z-index: 999;
}

.menu-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.side-menu-header {
    font-size: .8rem;
    font-weight: 800;
    color: var(--label-color);
    letter-spacing: .12em;

    margin-bottom: 1rem;
}

.menu-section {
    padding: .8rem 0;
    border-bottom: 1px solid #e5e7eb;
}

.menu-depth-1 {
    display: block;
    margin-bottom: .45rem;
    color: #111827;
    font-size: 1.2rem;
    font-weight: 800;
    text-decoration: none;
}

.menu-depth-2-list {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.menu-depth-2,
.menu-depth-3 {
    display: block;

    padding: .45rem .55rem;
    border-radius: .5rem;

    color: #374151;
    font-size: .95rem;
    text-decoration: none;
}

.menu-depth-2:hover,
.menu-depth-3:hover {
    background: #f3f4f6;
}

.menu-depth-2.has-children::after {
    content: '+';
    float: right;
    font-weight: 800;
    color: var(--label-color);
}

.menu-depth-2-wrapper.open > .menu-depth-2.has-children::after {
    content: '−';
}

.menu-depth-3-list {
    display: none;
    margin-left: .75rem;
    padding-left: .5rem;
    border-left: 2px solid #e5e7eb;
}

.menu-depth-2-wrapper.open > .menu-depth-3-list {
    display: block;
}

.menu-depth-3 {
    color: #6b7280;
    font-size: .9rem;
}
.menu-depth-3-main {
    display: block;
    padding: .55rem .35rem;
    border-radius: .5rem;
    font-size: .95rem;
    font-weight: 700;
    color: #111827;
    text-decoration: none
}

.menu-depth-3-main:hover {
    background: #f3f4f6;
}
#footer{
    margin-top:4rem;
    background:#0f172a;
    color:#cbd5e1;
}

.footer-container{
    max-width:1200px;
    margin:0 auto;
    padding:3rem 1.5rem;
}

.footer-title{
    color:white;
    text-decoration:none;
    font-size:1.8rem;
    font-weight:800;
}

.footer-description{
    margin-top:.5rem;
    color:#94a3b8;
}

.footer-links{
    margin-top:2rem;

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:2rem;
}

.footer-section{
    display:flex;
    flex-direction:column;
    gap:.6rem;
}

.footer-section-title{
    margin:0 0 .5rem;
    color:white;
    font-size:1rem;
}

.footer-link{
    color:#cbd5e1;
    text-decoration:none;
}

.footer-link:hover{
    color:var(--label-color);
}

.footer-divider{
    margin:2rem 0;
    height:1px;
    background:rgba(255,255,255,.1);
}

.footer-copyright{
    margin:0;
    color:#64748b;
    font-size:.9rem;
}
.body-content{ 
    max-width:1200px;
    margin:0 auto;
    padding: calc(3rem + 2rem) 3rem 3rem;
}
.article-page{
    max-width: 900px;
    margin: 0 auto;
}
.article-header{
    margin-bottom:2rem;
}
.article-header h1{
    margin:0;
    color:#0f172a;
    font-size:clamp(2rem, 5vw, 3.5rem);
    letter-spacing:-.04em;
}
.article-header p{
    margin-top:1rem;
    color:#6b7280;
    line-height:1.8;
}
.article-notice{
    margin:1.5rem 0 2rem;
    padding:1rem 1.25rem;
    background:#fff7ed;
    border-left:4px solid var(--label-color);
    border-radius:12px;
    color:#9a3412;
}

.article-notice strong{
    display:block;
    margin-bottom:.5rem;
    font-size:.9rem;
    font-weight:800;
}

.article-notice p{
    margin:0;
    line-height:1.4;
}
.in-development{
    padding:1rem;
}
.in-development h2{
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #64748b;
}
.in-development p{
    padding: 0.5rem 0 1rem;
}
.in-development a{
    background-color: var(--label-color);
    color:white;
    margin-top: 1rem;
    padding: .7rem 1rem;
    font-size: .9rem;
    border-radius: 999px;
    font-weight: 800;
}
.floating-buttons{
    position:fixed;
    right:3rem;
    bottom:3rem;

    display:flex;
    flex-direction:column;
    gap:.6rem;

    z-index:900;
}

.floating-btn{
    width:46px;
    height:46px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:none;
    border-radius:999px;

    background:white;

    box-shadow:
        0 4px 14px rgba(15,23,42,.14),
        0 1px 3px rgba(15,23,42,.08);

    cursor:pointer;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.floating-btn:hover{
    transform:translateY(-2px);
    box-shadow:
        0 8px 22px rgba(15,23,42,.18),
        0 2px 6px rgba(15,23,42,.08);
}

.floating-btn img{
    width:22px;
    height:22px;
}

.floating-btn.report{
    background:#f97316;
}

.floating-btn.report img{
    filter:brightness(0) invert(1);
}
@keyframes floatingPulse{
    0%{
        box-shadow:0 0 0 0 rgba(220,38,38,.45);
    }

    70%{
        box-shadow:0 0 0 12px rgba(220,38,38,0);
    }

    100%{
        box-shadow:0 0 0 0 rgba(220,38,38,0);
    }
}

.floating-toast{
    position:fixed;
    right:1.25rem;
    bottom:calc(1.25rem + 46px * 3 + .6rem * 3 + 1rem);

    padding:.7rem 1rem;

    background:#111827;
    color:white;

    border-radius:999px;

    font-size:.9rem;
    font-weight:700;

    opacity:0;
    transform:translateY(8px);
    pointer-events:none;

    transition:
        opacity .2s ease,
        transform .2s ease;

    z-index:901;
}

.floating-toast.show{
    opacity:1;
    transform:translateY(0);
}
.floating-btn.emergency{
    position:relative;
    background:#dc2626;
    animation:floatingPulse 1.6s infinite;
}

.floating-btn.emergency img{
    filter:brightness(0) invert(1);
}


.floating-alert-count{
    position:absolute;
    top:-4px;
    right:-4px;

    min-width:18px;
    height:18px;

    padding:0 4px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:999px;

    background:#111827;
    color:white;

    font-size:.7rem;
    font-weight:900;
}

.alert-popup-overlay{
    position:fixed;
    inset:0;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:1rem;

    background:rgba(15,23,42,.55);
    backdrop-filter:blur(4px);

    z-index:1200;
}

.alert-popup{
    width:min(680px,100%);
    max-height:80vh;

    background:white;

    border-radius:22px;

    overflow:hidden;

    box-shadow:0 24px 70px rgba(15,23,42,.35);
}

.alert-popup-header{
    padding:1.25rem 1.5rem;

    display:flex;
    align-items:center;
    justify-content:space-between;

    border-bottom:1px solid #e5e7eb;
}

.alert-popup-header h2{
    margin:0;

    color:#111827;
    font-size:1.35rem;
}

.alert-popup-close{
    width:36px;
    height:36px;

    border:none;
    border-radius:999px;

    background:#f3f4f6;
    color:#374151;

    font-size:1.5rem;
    line-height:1;

    cursor:pointer;
}

.alert-popup-list{
    max-height:calc(80vh - 110px);
    overflow-y:auto;

    padding:1rem;
}

.alert-item{
    padding:1.2rem;

    border-radius:18px;
    border:1px solid #e5e7eb;

    background:#f9fafb;
}

.alert-item + .alert-item{
    margin-top:.8rem;
}

.alert-item-top{
    display:flex;
    align-items:center;
    gap:.75rem;
    flex-wrap:wrap;
}

.alert-level{
    padding:.25rem .55rem;

    border-radius:999px;

    font-size:.72rem;
    font-weight:900;
}

.alert-item h3{
    margin:0;

    color:#111827;
    font-size:1.1rem;
}

.alert-item p{
    margin:.75rem 0 0;

    color:#4b5563;
    line-height:1.75;
}

/* LEVEL 1 - 정보 */
.alert-item.level-1{
    border-left:5px solid #38bdf8;
    background:#f0f9ff;
}

.alert-level.level-1{
    background:#e0f2fe;
    color:#0369a1;
}

/* LEVEL 2 - 관심 */
.alert-item.level-2{
    border-left:5px solid #14b8a6;
    background:#f0fdfa;
}

.alert-level.level-2{
    background:#ccfbf1;
    color:#0f766e;
}

/* LEVEL 3 - 주의 */
.alert-item.level-3{
    border-left:5px solid #f59e0b;
    background:#fffbeb;
}

.alert-level.level-3{
    background:#fef3c7;
    color:#b45309;
}

/* LEVEL 4 - 위험 */
.alert-item.level-4{
    border:1px solid #fecaca;
    border-left:5px solid #dc2626;
    background:#fef2f2;
}

.alert-level.level-4{
    background:#fee2e2;
    color:#b91c1c;
}

/* LEVEL 5 - 긴급 */
.alert-item.level-5{
    border:1px solid #d8b4fe;
    border-left:5px solid #7e22ce;
    background:#faf5ff;
}

.alert-level.level-5{
    background:#f3e8ff;
    color:#6b21a8;
}
.alert-tags{
    margin-top:.8rem;

    display:flex;
    flex-wrap:wrap;
    gap:.4rem;
}

.alert-tags span{
    padding:.22rem .55rem;

    border-radius:999px;

    background:white;
    border:1px solid #e5e7eb;

    color:#4b5563;

    font-size:.78rem;
    font-weight:800;
}

.alert-links{
    margin-top:1rem;

    display:flex;
    flex-wrap:wrap;
    gap:.5rem;
}
.alert-links a{
    transition: .2s;
}
.alert-links a:hover{
    transition: .2s;
    transform: translateY(-3px);
}
.alert-links a{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:.55rem .8rem;

    border-radius:999px;

    background:#f97316;
    color:white;

    font-size:.85rem;
    font-weight:800;
    text-decoration:none;
}
.alert-time{
    display:block;
    margin-top:.5rem;
    color:#6b7280;
    font-size:.85rem;
    font-weight:700;
}
@media(max-width:600px){
    .floating-buttons{
        right:.9rem;
        bottom:.9rem;
        gap:.5rem;
    }

    .floating-btn{
        width:44px;
        height:44px;
    }

    .floating-btn img{
        width:21px;
        height:21px;
    }

    .floating-toast{
        right:.9rem;
        bottom:calc(.9rem + 44px * 3 + .5rem * 3 + 1rem);
    }
    .alert-popup{
        max-height:85vh;
        border-radius:18px;
    }

    .alert-popup-header{
        padding:1rem 1.15rem;
    }

    .alert-popup-list{
        max-height:calc(85vh - 95px);
        padding:.8rem;
    }
}
@media (max-width:640px){
    .header-right{
        display: none;
    }
    .body-content{ 
        padding: calc(3rem + 2rem) 0rem 3rem;
    }
    .article-header{
        padding:0 1rem;
        padding-bottom: 1rem;
    }
}