@charset "UTF-8";

/* ===============================
   Base / Layout
   =============================== */

:root{
    --brand:#055C4D;
    --brand2:#0b6f5e;
    --text:#111;
    --muted:#666;
    --line:#e8e8e8;
    --bg:#f6f7f8;
    --card:#fff;
    --radius:16px;
    --shadow:0 12px 30px rgba(0,0,0,0.06);
    --shadow2:0 18px 50px rgba(0,0,0,0.10);

    /* ✅ 헤더/푸터가 fixed/겹침일 때 안전영역 */
    --header-h: 90px;   /* ← 헤더 실제 높이에 맞춰 80~110px로 조절 */
    --footer-h: 140px;  /* ← 푸터가 겹치거나 답답하면 120~180px로 조절 */
}

/* 페이지 배경 + 헤더/푸터 가림 방지 */
body{
    background: var(--bg);
    color: var(--text);

    /* ✅ 헤더가 fixed면 컨텐츠가 위로 끼는거 방지 */
    padding-top: var(--header-h);

    /* ✅ 푸터가 겹치거나 바닥이 답답한 느낌 방지 */
    padding-bottom: var(--footer-h);
}

/* 상단 header가 fixed일 수도 있어서 여유 */
.section1, .section2, .section3{
    position: relative;
}

.inner{
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}

/* scrollIntoView 시 헤더에 안 가리게 */
#resultSection{
    scroll-margin-top: calc(var(--header-h) + 16px);
}

/* ===============================
   Section 1 : Title / Product
   =============================== */

.section1{
    /* ✅ 기존 70px 대신, 헤더 높이 반영해서 자연스럽게 */
    padding: calc(40px) 0 40px;
}

/* 은은한 히어로 배경 */
.section1::before{
    content:"";
    position:absolute;
    left:0; right:0; top: calc(-20px);
    height: 240px;
    background:
            radial-gradient(1000px 260px at 15% 30%, rgba(5,92,77,.18), transparent 60%),
            radial-gradient(800px 220px at 85% 20%, rgba(11,111,94,.14), transparent 55%),
            linear-gradient(to bottom, #fff, rgba(255,255,255,0));
    pointer-events:none;
    z-index:0;
}

.section1 .inner{
    position: relative;
    z-index: 1;
}

.section1 .title-area{
    text-align: center;
}

.section1 .title-area h1{
    font-size: clamp(26px, 2.6vw, 44px);
    font-weight: 900;
    letter-spacing: -1px;
    line-height: 1.15;
    color: var(--brand);
}

.section1 .title-area .sub{
    margin: 12px 0 22px;
    font-size: 16px;
    color: #555;
    line-height: 1.6;
}

/* 상품 영역 카드화 */
.section1 .product-area{
    height: auto;
    padding: 22px 26px;
    background: rgba(255,255,255,0.7);
    border: 1px solid #eaeaea;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    backdrop-filter: blur(6px);
}

.section1 .product-badge{
    width: auto;
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 10px 16px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #eaeaea;
}

.section1 .product-badge .label{
    font-size: 13px;
    color: var(--brand);
    font-weight: 900;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(5,92,77,0.10);
    border: 1px solid rgba(5,92,77,0.18);
    margin-left: 0;
}

.section1 .product-badge .name{
    font-size: 16px;
    font-weight: 900;
    color: #2f2f2f;
    letter-spacing: -0.2px;
}

.section1 .desc{
    margin: 12px 0 0;
    font-size: 13px;
    color: #666;
    text-align: center;
}

/* ===============================
   Section 2 : 투자 설정
   =============================== */

.section2{
    padding-bottom: 60px;
}

.section2 .panel{
    border: 1px solid #eaeaea;
    border-radius: var(--radius);
    background: #fff;
    padding: 28px 30px;
    box-shadow: var(--shadow);
}

.section2 .panel-head{
    display:flex;
    align-items:flex-end;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f1f1f1;
    margin-bottom: 18px;
}

.section2 .panel-head h2{
    font-size: 20px;
    font-weight: 900;
}

.section2 .panel-head p{
    margin: 0;
    font-size: 14px;
    color: #666;
}

/* 입력 폼 */
.form-grid .inputWrap{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 18px;
}

.field .atit{
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 800;
    color: #222;
}

/* input + unit */
.input-wrap{
    position: relative;
}

.inner .panel input{
    width: 100%;
    border: 1px solid #e1e1e1;
    border-radius: 14px;
    height: 48px;
    font-size: 14px;
    font-weight: 700;
    padding: 0 14px;
    outline: none;
    background: #fff;
    transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}

.input-wrap input{
    padding-right: 46px; /* unit 공간 */
}

/* text input도 동일하게 */
.field > input[type="text"],
.field > input[type="number"],
.field > input[type="date"]{
    width: 100%;
}

/* 포커스 */
.input-wrap input:focus,
.field > input[type="text"]:focus,
.field > input[type="number"]:focus,
.field > input[type="date"]:focus{
    border-color: rgba(5,92,77,0.55);
    box-shadow: 0 0 0 4px rgba(5,92,77,0.12);
    transform: translateY(-1px);
}

.unit{
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #777;
    font-weight: 800;
}

.hint{
    margin-top: 8px;
    font-size: 12px;
    color: #999;
    display: none;
}
.hint.is-show{ display:block; }

.actions{
    display: flex;
    gap: 12px;
    margin-top: 20px;
    justify-content: flex-end;
}

/* 버튼 공통 */
.btn-primary{
    width: 190px;
    height: 46px;
    border: 1px solid rgba(5,92,77,0.18);
    border-radius: 14px;
    background: linear-gradient(135deg, var(--brand), var(--brand2));
    color: #fff;
    font-weight: 900;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(5,92,77,0.22);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.btn-ghost{
    height: 46px;
    border-radius: 14px;
    border: 1px solid #e1e1e1;
    background: #fff;
    color: #222;
    font-weight: 900;
    padding: 0 18px;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.btn-primary:hover{
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(5,92,77,0.26);
    filter: brightness(1.02);
}

.btn-ghost:hover{
    background: #fafafa;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(0,0,0,0.06);
}

/* dev-note */
.section2 .dev-note{
    margin-top: 16px;
    border-top: 1px dashed #e8e8e8;
    padding-top: 14px;
    color: #666;
    font-size: 12px;
    line-height: 1.6;
}

.section2 .dev-note code{
    background: #f4f4f4;
    padding: 2px 6px;
    border-radius: 8px;
}

/* ===============================
   Section 3 : 결과
   =============================== */

.section3{
    /* ✅ 푸터 여유 포함해서 더 넉넉하게 */
    padding: 0 0 calc(80px + 40px) ;
}

.section3.is-hidden{ display:none; }

.section3 .result-head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin: 18px 0 18px 0;
    padding-top: 10px;
}

.section3 .result-head .left h2{
    font-size: 20px;
    font-weight: 900;
    margin-left: 0;
    margin-bottom: 0;
}

/* 상세해설 버튼 */
.btn-outline{
    min-width: 180px;
    height: 44px;
    padding: 0 18px;
    border: 1px solid rgba(5,92,77,0.18);
    border-radius: 14px;
    background: #fff;
    color: var(--brand);
    font-size: 14px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.btn-outline:hover{
    background: rgba(5,92,77,0.06);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(0,0,0,0.08);
}

.btn-outline:active{
    transform: translateY(0);
    box-shadow: none;
}

/* 요약 스트립 */
.section3 .summary-strip{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    padding: 14px;
    border: 1px solid #ededed;
    border-radius: var(--radius);
    background: rgba(255,255,255,0.65);
    backdrop-filter: blur(6px);
}

.section3 .summary-item{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 0 10px 22px rgba(0,0,0,0.04);
}

.section3 .summary-item .k{
    color: #666;
    font-size: 13px;
    font-weight: 800;
}

.section3 .summary-item .v{
    font-size: 16px;
    font-weight: 900;
}

/* 차트 패널 */
.section3 .chart-panel{
    margin-top: 18px;
    border: 1px solid #eaeaea;
    border-radius: var(--radius);
    background: #fff;
    overflow: hidden;
    box-shadow: var(--shadow);
    padding: 18px 18px 24px;
}

/* canvas 살짝 여백 */
.section3 .chart-panel canvas{
    width: 100% !important;
}

/* ===============================
   Modal (투자 시뮬레이션 전용)
   =============================== */

.sim-modal-bg{
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 10000;
}

.sim-modal{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 560px;
    max-width: calc(100% - 24px);
    background: #fff;
    padding: 22px 22px 18px;
    border-radius: 18px;
    box-shadow: var(--shadow2);
    border: 1px solid rgba(255,255,255,0.4);
}

.sim-modal h3{
    margin-bottom: 12px;
    font-size: 18px;
    font-weight: 900;
}

#modalSummary{
    max-height: 360px;
    overflow: auto;
    padding: 14px;
    border-radius: 14px;
    background: #f7f7f7;
    border: 1px solid #eee;
}

/* 닫기 버튼(브랜드 컬러로 통일) */
.sim-modal .close-btn{
    margin-top: 14px;
    width: 100%;
    height: 44px;
    padding: 0 14px;
    background: linear-gradient(135deg, var(--brand), var(--brand2));
    color: #fff;
    border: 1px solid rgba(5,92,77,0.18);
    border-radius: 14px;
    font-weight: 900;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
    box-shadow: 0 10px 22px rgba(5,92,77,0.22);
}
.sim-modal .close-btn:hover{
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(5,92,77,0.26);
}

/* ===============================
   Responsive
   =============================== */

@media (max-width: 980px){
    :root{
        --header-h: 80px;
        --footer-h: 120px;
    }

    .form-grid .inputWrap{
        grid-template-columns: 1fr;
    }
    .actions{
        justify-content: stretch;
    }
    .btn-primary{
        width: 100%;
    }
    .summary-strip{
        grid-template-columns: 1fr;
    }
    .section3 .result-head{
        flex-direction: column;
        align-items: stretch;
    }
    .btn-outline{
        width: 100%;
    }
}