/* ============================================================
   데이터 인사이트 마스터 커뮤니티 — 海雾沉香 palette
   ============================================================ */

:root{
    --fog:    #8FA0A7;   /* sea-fog sage   */
    --fog-dk: #6E8088;   /* deeper sage    */
    --sand:   #C7B299;   /* warm agarwood  */
    --sand-dk:#B49C7C;
    --cream:  #EFE9E0;   /* soft ivory     */
    --cream-2:#F6F2EA;
    --ink:    #3A4147;   /* text dark      */
    --ink-soft:#6B747A;
    --white:  #FCFAF6;
    --shadow: 0 18px 48px -20px rgba(58,65,71,.32);
    --shadow-sm: 0 8px 24px -14px rgba(58,65,71,.28);
    --radius: 22px;
    --maxw: 560px;
}

*{box-sizing:border-box;margin:0;padding:0;}

html{scroll-behavior:smooth;}

body{
    font-family:'Nanum Gothic', sans-serif;
    color:var(--ink);
    background:
        radial-gradient(1200px 640px at 80% -8%, rgba(199,178,153,.30), transparent 60%),
        radial-gradient(1000px 600px at -10% 12%, rgba(143,160,167,.28), transparent 55%),
        linear-gradient(180deg, var(--cream-2) 0%, var(--cream) 100%);
    background-attachment:fixed;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
    padding-bottom:120px;          /* 给固定按钮留位 */
    overflow-x:hidden;
}

b{font-weight:800;color:var(--fog-dk);}

/* ===== 雾气背景 ===== */
.fog-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;}
.fog-bg::before{
    content:"";position:absolute;top:-30%;left:50%;
    width:90%;height:80%;transform:translateX(-50%);
    background:radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.55), rgba(199,178,153,.18) 40%, transparent 70%);
    animation:beam 9s ease-in-out infinite;
}
@keyframes beam{0%,100%{opacity:.5;transform:translateX(-50%) scale(1);}50%{opacity:.85;transform:translateX(-50%) scale(1.08);}}
.fog{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;}
.fog-1{width:420px;height:420px;background:var(--fog);top:-120px;right:-80px;animation:drift 18s ease-in-out infinite;}
.fog-2{width:360px;height:360px;background:var(--sand);bottom:18%;left:-120px;animation:drift 22s ease-in-out infinite reverse;}
.fog-3{width:300px;height:300px;background:#D8CBB6;top:45%;right:-90px;animation:drift 26s ease-in-out infinite;}
@keyframes drift{
    0%,100%{transform:translate(0,0) scale(1);}
    50%{transform:translate(-24px,30px) scale(1.12);}
}

/* ===== 容器 ===== */
.wrap{
    max-width:var(--maxw);
    margin:0 auto;
    padding:54px 22px 40px;
}

/* ===== 通用卡片 ===== */
.card{
    background:rgba(252,250,246,.82);
    backdrop-filter:blur(8px);
    border:1px solid rgba(199,178,153,.42);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}

/* ===== HERO ===== */
.hero{text-align:center;}
.eyebrow{
    font-size:11px;letter-spacing:.42em;font-weight:700;
    color:var(--sand-dk);margin-bottom:16px;text-indent:.42em;
}
.hero-title{
    font-family:'Nanum Myeongjo', serif;
    font-weight:800;
    font-size:38px;line-height:1.28;
    color:var(--ink);
    letter-spacing:-.01em;
}
.hero-sub{
    margin-top:14px;font-size:15px;color:var(--ink-soft);
}
.hero-sub b{color:var(--fog-dk);}

.emblem{
    position:relative;
    width:128px;height:128px;margin:34px auto 28px;
    border-radius:50%;
    background:var(--white);
    border:1px solid rgba(199,178,153,.55);
    box-shadow:var(--shadow-sm), inset 0 0 0 6px rgba(239,233,224,.7);
    display:grid;place-items:center;
    animation:emblemGlow 4s ease-in-out infinite;
}
.emblem::before{
    content:"";position:absolute;inset:-14px;border-radius:50%;
    background:conic-gradient(from 0deg, transparent 0deg, rgba(143,160,167,.55) 90deg, transparent 200deg, rgba(199,178,153,.55) 300deg, transparent 360deg);
    filter:blur(9px);opacity:.7;z-index:-1;
    animation:spin 7s linear infinite;
}
.emblem img{width:128%;height:128%;object-fit:cover;border-radius:50%;}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes emblemGlow{
    0%,100%{box-shadow:var(--shadow-sm), inset 0 0 0 6px rgba(239,233,224,.7), 0 0 0 0 rgba(143,160,167,0);}
    50%{box-shadow:0 14px 40px -10px rgba(143,160,167,.55), inset 0 0 0 6px rgba(239,233,224,.7), 0 0 22px 2px rgba(199,178,153,.35);}
}

.pill-cta{
    position:relative;overflow:hidden;
    font-family:inherit;cursor:pointer;
    display:inline-flex;align-items:center;gap:9px;
    background:linear-gradient(135deg, var(--fog) 0%, var(--fog-dk) 100%);
    color:#fff;font-weight:700;font-size:14.5px;
    border:none;border-radius:999px;
    padding:14px 28px;
    box-shadow:0 14px 28px -12px rgba(110,128,136,.7);
    transition:transform .2s ease, box-shadow .2s ease;
}
.pill-cta > span,.pill-cta > .btn-icon,
.showcase-cta > span,.showcase-cta > .btn-icon,.showcase-cta > .arr{position:relative;z-index:1;}
.pill-cta .btn-icon{width:22px;height:22px;object-fit:contain;flex:0 0 auto;}
.showcase-cta .btn-icon{width:22px;height:22px;object-fit:contain;flex:0 0 auto;}
.pill-cta:hover{transform:translateY(-2px);box-shadow:0 20px 34px -12px rgba(110,128,136,.8);}
.pill-cta:active{transform:translateY(0);}

/* 按钮光扫 */
.pill-cta::before,
.fixed-cta::before{
    content:"";position:absolute;top:0;left:0;width:55%;height:100%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
    transform:translateX(-160%) skewX(-20deg);
    animation:shine 3.5s ease-in-out infinite;
    pointer-events:none;
}
@keyframes shine{
    0%{transform:translateX(-160%) skewX(-20deg);}
    55%,100%{transform:translateX(320%) skewX(-20deg);}
}

.hero-desc{
    margin-top:26px;font-size:14px;color:var(--ink-soft);
    line-height:1.85;text-align:left;
}

/* ===== 무료 혜택 ===== */
.gift{
    position:relative;
    margin-top:40px;padding:30px 26px 28px;
    background:linear-gradient(160deg, rgba(199,178,153,.20), rgba(252,250,246,.92));
}
.gift-badge{
    position:absolute;top:-13px;left:26px;overflow:hidden;
    background:var(--sand-dk);color:#fff;
    font-size:11px;font-weight:800;letter-spacing:.18em;
    padding:6px 14px;border-radius:999px;
    box-shadow:var(--shadow-sm);
}
.gift-badge::after{
    content:"";position:absolute;top:0;left:0;width:50%;height:100%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
    transform:translateX(-160%) skewX(-20deg);
    animation:shine 3s ease-in-out infinite 1s;
}
.gift-title{
    font-size:19px;font-weight:800;color:var(--ink);
    margin-bottom:16px;
}
.gift-list{list-style:none;display:grid;gap:12px;}
.gift-list li{
    display:flex;align-items:center;gap:12px;
    font-size:14px;color:var(--ink);
    background:rgba(255,255,255,.6);
    border:1px solid rgba(199,178,153,.35);
    border-radius:14px;padding:12px 14px;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.gift-list li:hover{
    transform:translateX(4px);
    border-color:rgba(199,178,153,.7);
    box-shadow:var(--shadow-sm);
}
.gift-list .ico{
    flex:0 0 40px;width:40px;height:40px;border-radius:12px;
    display:grid;place-items:center;color:var(--fog-dk);
    background:linear-gradient(135deg, rgba(143,160,167,.22), rgba(199,178,153,.22));
    border:1px solid rgba(143,160,167,.3);
}
.gift-list .ico svg{width:21px;height:21px;}

/* ===== 특징 ===== */
.features{margin-top:34px;display:grid;gap:14px;}
.feature{
    display:flex;align-items:center;gap:16px;
    padding:18px 20px;
}
.feature-ico{
    flex:0 0 56px;width:56px;height:56px;border-radius:16px;
    background:var(--cream);overflow:hidden;
    border:1px solid rgba(199,178,153,.45);
    display:grid;place-items:center;
}
.feature-ico img{width:100%;height:100%;object-fit:cover;}
.feature-tx h3{font-size:16px;font-weight:800;color:var(--ink);}
.feature-tx p{font-size:13px;color:var(--ink-soft);margin-top:4px;}

/* ===== 비주얼 + CTA ===== */
.showcase{margin-top:36px;}
.showcase-img{
    position:relative;border-radius:var(--radius);overflow:hidden;
    box-shadow:var(--shadow);border:1px solid rgba(199,178,153,.4);
}
.showcase-img img{display:block;width:100%;height:auto;}
.showcase-img::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.4) 50%, transparent 62%);
    transform:translateX(-100%);
    animation:sweep 5.5s ease-in-out infinite;
}
@keyframes sweep{0%{transform:translateX(-100%);}55%,100%{transform:translateX(100%);}}
.showcase-cta{
    font-family:inherit;cursor:pointer;
    position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
    white-space:nowrap;overflow:hidden;
    display:flex;align-items:center;gap:9px;
    background:linear-gradient(135deg, var(--sand) 0%, var(--sand-dk) 100%);
    color:#fff;font-weight:800;font-size:15px;
    border:none;border-radius:999px;
    padding:15px 28px;
    box-shadow:0 14px 30px -10px rgba(120,98,70,.75);
    transition:transform .2s ease, box-shadow .2s ease;
}
.showcase-cta:hover{transform:translateX(-50%) translateY(-2px);box-shadow:0 20px 38px -10px rgba(120,98,70,.85);}
.showcase-cta .arr{width:18px;height:18px;animation:nudge 1.6s ease-in-out infinite;}
@keyframes nudge{0%,100%{transform:translateX(0);}50%{transform:translateX(5px);}}

/* ===== 학습 환경 ===== */
.env{margin-top:36px;padding:30px 26px;}
.env-title{
    display:flex;align-items:center;justify-content:center;gap:9px;
    text-align:center;font-size:20px;font-weight:800;
    color:var(--ink);margin-bottom:20px;
}
.env-title svg{
    width:21px;height:21px;color:var(--sand-dk);
    animation:twinkle 2.6s ease-in-out infinite;
}
@keyframes twinkle{
    0%,100%{opacity:.55;transform:scale(.88) rotate(0deg);}
    50%{opacity:1;transform:scale(1.08) rotate(12deg);}
}
.env-list{list-style:none;display:grid;gap:14px;}
.env-list li{
    position:relative;padding-left:32px;
    font-size:14.5px;color:var(--ink);
}
.env-list li::before{
    content:"";position:absolute;left:0;top:3px;
    width:20px;height:20px;border-radius:50%;
    background:var(--fog);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/15px no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/15px no-repeat;
}

/* ===== 면책 안내 ===== */
.notice{
    margin-top:34px;text-align:center;
    font-size:12px;color:var(--ink-soft);line-height:1.9;
}

/* ===== FOOTER ===== */
.footer{
    margin-top:46px;
    background:linear-gradient(180deg, var(--fog-dk) 0%, #4F5A60 100%);
    color:rgba(255,255,255,.78);
    border-top:4px solid var(--sand);
}
.footer-inner{
    max-width:var(--maxw);margin:0 auto;
    padding:42px 26px 40px;text-align:center;
}
.footer-title{
    color:var(--sand);font-size:15px;font-weight:800;
    letter-spacing:.06em;margin-bottom:16px;
}
.footer-inner p{font-size:13px;margin:5px 0;}
.footer-policy{
    margin-top:24px !important;
    font-size:12px;color:rgba(255,255,255,.6);line-height:1.9;
}
.footer-links{
    margin-top:26px;display:flex;justify-content:center;
    align-items:center;gap:12px;flex-wrap:wrap;
}
.footer-links a{
    color:rgba(255,255,255,.9);text-decoration:none;font-size:13px;
    border-bottom:1px dotted rgba(255,255,255,.4);padding-bottom:1px;
    transition:color .2s;
}
.footer-links a:hover{color:var(--sand);}
.footer-links .sep{color:rgba(255,255,255,.35);}

/* ===== 固定底部按钮 (PC/手机居中, 常驻) ===== */
.fixed-bar{
    position:fixed;left:0;right:0;bottom:0;z-index:90;
    display:flex;justify-content:center;
    padding:14px 16px calc(14px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg, rgba(239,233,224,0) 0%, rgba(239,233,224,.92) 38%);
    backdrop-filter:blur(4px);
    pointer-events:none;
}
.fixed-cta{
    position:relative;overflow:hidden;
    pointer-events:auto;
    font-family:inherit;cursor:pointer;
    width:100%;max-width:var(--maxw);
    display:flex;align-items:center;justify-content:center;gap:10px;
    background:linear-gradient(135deg, var(--fog) 0%, var(--fog-dk) 50%, var(--sand-dk) 130%);
    background-size:180% 100%;
    color:#fff;font-weight:800;font-size:16.5px;
    border:none;border-radius:999px;
    padding:16px 24px;
    box-shadow:0 16px 36px -10px rgba(58,65,71,.6);
    animation:pulse 2.4s ease-in-out infinite, hueShift 6s ease-in-out infinite;
}
.fixed-cta > *{position:relative;z-index:1;}
@keyframes hueShift{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}
.fixed-cta .btn-icon{width:24px;height:24px;object-fit:contain;}
.fixed-cta:active{transform:scale(.985);}
@keyframes pulse{
    0%,100%{box-shadow:0 16px 36px -10px rgba(58,65,71,.6);}
    50%{box-shadow:0 16px 46px -6px rgba(143,160,167,.9);}
}

/* ===== 弹窗 ===== */
.modal-overlay{
    position:fixed;inset:0;z-index:200;
    background:rgba(58,65,71,.55);backdrop-filter:blur(3px);
    display:none;align-items:center;justify-content:center;
    padding:22px;
}
.modal-overlay.show{display:flex;}
.modal-box{
    position:relative;
    background:var(--white);
    border-radius:20px;
    max-width:520px;width:100%;max-height:80vh;overflow-y:auto;
    padding:30px 26px 28px;
    box-shadow:var(--shadow);
    border:1px solid rgba(199,178,153,.5);
    animation:pop .25s ease;
}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.98);}to{opacity:1;transform:none;}}
.modal-close{
    position:absolute;top:14px;right:16px;
    background:none;border:none;font-size:28px;line-height:1;
    color:var(--ink-soft);cursor:pointer;
}
.modal-title{
    font-family:'Nanum Myeongjo',serif;
    font-size:20px;font-weight:800;color:var(--ink);
    margin-bottom:16px;padding-right:24px;
}
.modal-body{font-size:13.5px;color:var(--ink);line-height:1.85;}
.modal-body h4{font-size:14.5px;font-weight:800;color:var(--fog-dk);margin:16px 0 6px;}
.modal-body p{margin-bottom:8px;}
.modal-body ul{margin:6px 0 6px 18px;}
.modal-body li{margin-bottom:5px;}

/* ===== 入场动画 ===== */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1;transform:none;}

/* ===== 减少动效偏好 ===== */
@media(prefers-reduced-motion:reduce){
    *{animation:none !important;transition:none !important;}
}

/* ===== 桌面端 ===== */
@media(min-width:768px){
    :root{--maxw:600px;}
    .wrap{padding-top:70px;}
    .hero-title{font-size:46px;}
    .features{grid-template-columns:1fr;}
}