*{margin:0;padding:0;box-sizing:border-box;}
body{
    font-family:"Noto Sans KR",-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    background:#ffffff;
    color:#222;
    line-height:1.7;
}
.wrap{
    max-width:1200px;
    margin:0 auto;
}

/* 상단 헤더 */
.hero{
    padding:26px 24px 24px;
    border-radius:16px;
    background: linear-gradient(120deg, #1F3A7A, #3558A6);
    color:#fff;
    margin-bottom:32px;
    box-shadow:0 10px 26px rgba(10,40,120,0.25);
}

/* hero 날씨 레이아웃 */
.hero-top{
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:14px;
}
.hero-icon-wrap{
    width:60px;
    height:60px;
    border-radius:50%;
    background:radial-gradient(circle at 30% 20%, #ffe57f, #ffb300);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 4px 14px rgba(0,0,0,0.25);
    flex-shrink:0;
}
.hero-icon-wrap img{
    width:36px;
    height:36px;
    object-fit:contain;
}
.hero-text-area{
    flex:1;
}

.hero-date{
    font-size:13px;
    opacity:.9;
    margin-bottom:4px;
}
.hero-title{
    font-size:24px;
    font-weight:700;
    margin-bottom:4px;
}
.hero-subline{
    font-size:13px;
    opacity:.95;
}

/* hero 요약 본문 */
.hero-summary{
    font-size:14px;
    opacity:.95;
}

/* 한줄 요약 */
.brief{
    margin-bottom:28px;
    padding:18px 20px;
    border-radius:12px;
    background:#f4f7ff;
    border:1px solid #dfe6ff;
    font-size:15px;
}
.brief strong{
    color:#1F5FFF;
}

/* 3개 카드 - 지수/섹터/수급 */
.grid-3{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
    margin-bottom:32px;
}
.card{
    border-radius:12px;
    border:1px solid #e3e6f0;
    padding:16px 16px 18px;
    background:#fff;
    box-shadow:0 6px 18px rgba(15,35,80,0.05);
}

/* 카드 상단 날씨 스타일 */
.card-header{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:10px;
}
.card-weather-icon{
    width:34px;
    height:34px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    font-weight:700;
    flex-shrink:0;
    color:#fff;
}

/* 각 카드별 날씨 느낌 색상 + 이미지 가정 */
.card-weather-icon.sun{
    background:radial-gradient(circle at 30% 20%, #ffe57f, #ffb300);
    /* 해 아이콘 이미지가 있다면 주석 해제해서 사용
    background-image:url('img/sun.png');
    background-size:60% 60%;
    background-position:center;
    background-repeat:no-repeat;
    font-size:0;
    */
}
.card-weather-icon.cloud{
    background:linear-gradient(135deg,#cfd9ff,#7f8acb);
    /* background-image:url('img/cloud.png'); */
}
.card-weather-icon.wind{
    background:linear-gradient(135deg,#9be7ff,#0288d1);
    /* background-image:url('img/wind.png'); */
}

.card-title{
    font-size:15px;
    font-weight:700;
    color:#1F3A7A;
    margin-bottom:0;
}
.card-body{
    font-size:13px;
    color:#444;
}
.card-body p{margin-bottom:4px;}
.card-body p:last-child{margin-bottom:0;}
.card-body .pos{color:#e02424;font-weight:600;}
.card-body .neg{color:#1F5FFF;font-weight:600;}

/* 섹션 공통 */
.section{
    margin-bottom:34px;
}
.section-title{
    font-size:18px;
    font-weight:700;
    margin-bottom:10px;
    color:#1F3A7A;
}
.section-content{
    font-size:14px;
    color:#444;
}

/* 이슈 리스트 */
.issue-list{
    list-style:none;
    padding-left:0;
    margin-top:6px;
}
.issue-list li{
    padding:6px 0;
    border-bottom:1px dashed #eceff5;
    font-size:14px;
}
.issue-list li:last-child{border-bottom:none;}
.issue-label{
    display:inline-block;
    font-size:11px;
    padding:2px 7px;
    border-radius:999px;
    margin-right:6px;
    background:#eef2ff;
    color:#1F5FFF;
    font-weight:600;
}

/* 체크포인트 */
.check-list{
    margin-top:6px;
    padding-left:18px;
    font-size:14px;
}
.check-list li{margin-bottom:4px;}

.fhero{
    width:100%;
    height:150px;
    background:url("img/news.png") center/cover no-repeat; /* ← 여기 변경 */
    position:relative;
    overflow:hidden;
}
.fhero::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.25);
}
.fhero-title{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:1;
    font-size:40px;
    font-weight:700;
    color:#fff;
    text-shadow:0 2px 8px rgba(0,0,0,0.25);
    letter-spacing:5px;
}

.date-picker-box{
    margin:20px 0 28px 0;
    padding:14px 18px;
    background:#f7f9ff;
    border:1px solid #dbe3ff;
    border-radius:12px;
    display:flex;
    align-items:center;
    gap:16px;
    font-size:14px;
    color:#1F3A7A;
    font-weight:600;
}

.date-picker-box input[type="date"]{
    padding:8px 10px;
    border:1px solid #c9d4f5;
    border-radius:8px;
    font-size:14px;
}


/* 반응형 */
@media(max-width:900px){
    .grid-3{grid-template-columns:1fr;}
    .hero{padding:22px 18px;}
    .hero-top{align-items:flex-start;}
}

.styled-select{
    height:36px;
    min-width:110px;
    padding:0 32px 0 12px;
    font-size:14px;
    color:#333;
    background-color:#fff;

    border:1px solid #d1d5db;
    border-radius:8px;
    outline:none;
    
    /* 기본 화살표 제거 */
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    /* 커스텀 화살표 */
    background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;              /* ★ 반복 금지 */
    background-position:right 10px center;    /* 오른쪽 정렬 */
    background-size:10px 6px;                 /* ★ 아이콘 크기 고정 */
}

.styled-select:focus{
    border-color:#2563eb;
    box-shadow:0 0 0 2px rgba(37,99,235,.25);
}

.view-btn{
    height:36px;
    padding:0 16px;
    font-size:14px;
    font-weight:600;
    color:#fff;
    background:linear-gradient(135deg,#4f9bff,#2563eb);
    border:none;
    border-radius:8px;
    cursor:pointer;
    box-shadow:0 4px 12px rgba(37,99,235,.25);
    transition:0.15s;
}

/* hover 효과 */
.view-btn:hover{
    opacity:0.9;
}