/* DF MyDF 시작 화면 */
.dfi-splash,.dfi-tour{--b:#1f5fd6;--r:#e0582b;--ink:#16203a;--sub:#5d6577;--g:#eef1f6;font-family:"Pretendard Variable",Pretendard,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box}
.dfi-splash *,.dfi-tour *{box-sizing:border-box}
.dfi-splash[hidden],.dfi-tour[hidden]{display:none!important}
html.dfi-lock,html.dfi-lock body{overflow:hidden!important}

/* 대문 */
.dfi-splash{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;background:radial-gradient(700px 480px at 70% 25%,#1a4a9a 0%,rgba(26,74,154,0) 62%),linear-gradient(165deg,#0b1f44 0%,#0a1733 100%);color:#fff;transition:opacity .55s ease}
.dfi-splash.out{opacity:0}
.dfi-splash-in{text-align:center;padding:0 30px}
.dfi-logo{display:block;width:84px;height:84px;border-radius:22px;margin:0 auto 26px;box-shadow:0 18px 40px rgba(0,0,0,.35);opacity:0;transform:scale(.85);animation:dfiPop .7s .1s cubic-bezier(.2,.8,.2,1) forwards}
.dfi-splash h1{margin:0;font-size:30px;letter-spacing:-.03em;line-height:1.2;opacity:0;transform:translateY(10px);animation:dfiUp .6s .35s ease forwards}
.dfi-splash h1 span{font-weight:300;color:#cfe0ff}
.dfi-splash h1 b{font-weight:800}
.dfi-splash p{margin:12px 0 0;font-size:14.5px;color:#b9c6e0;opacity:0;transform:translateY(8px);animation:dfiUp .6s .55s ease forwards}
.dfi-splash-foot{position:absolute;bottom:calc(30px + env(safe-area-inset-bottom,0px));left:0;right:0;text-align:center;font-size:10.5px;letter-spacing:.24em;color:#7085ad}
@keyframes dfiPop{to{opacity:1;transform:none}}
@keyframes dfiUp{to{opacity:1;transform:none}}

/* 둘러보기(사용 안내) */
.dfi-tour{position:fixed;inset:0;z-index:2147482999;display:flex;align-items:center;justify-content:center;background:rgba(10,20,40,.55);transition:opacity .35s ease}
.dfi-tour.out{opacity:0}
.dfi-panel{position:relative;width:min(420px,100%);height:min(690px,100%);background:#fff;border-radius:26px;box-shadow:0 30px 70px rgba(0,0,0,.3);display:flex;flex-direction:column;overflow:hidden}
.dfi-head{flex:none;height:58px;padding:0 14px 0 22px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #edf0f5}
.dfi-head-l{display:flex;align-items:center;gap:10px}
.dfi-tag{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:13px;background:#16203a;color:#fff;font-size:12px;font-weight:700;letter-spacing:-.01em}
.dfi-tag:before{content:"";width:6px;height:6px;border-radius:50%;background:#7fb0ff}
.dfi-count{font-size:12.5px;color:#8a93a6;font-variant-numeric:tabular-nums}
.dfi-count b{color:var(--ink);font-weight:700}
.dfi-count i{font-style:normal}
.dfi-skip{border:0;background:none;font-family:inherit;font-size:13.5px;font-weight:600;color:#8a93a6;padding:8px;cursor:pointer}
.dfi-track{flex:1;position:relative;overflow:hidden;touch-action:pan-y}
.dfi-slide{position:absolute;inset:0;padding:26px 30px 0;display:flex;flex-direction:column;opacity:0;transform:translateX(40px);transition:opacity .45s ease,transform .45s ease;pointer-events:none}
.dfi-slide.on{opacity:1;transform:none;pointer-events:auto}
.dfi-slide.prev{transform:translateX(-40px)}
/* 그림은 휴대폰 화면 모양으로 — 실제 화면이 아니라 '예시'임이 보이도록 */
.dfi-art{position:relative;flex:none;width:100%;max-width:300px;height:250px;margin:0 auto 26px;border:7px solid #16203a;border-bottom:0;border-radius:32px 32px 0 0;background:#f4f6fa;padding:34px 15px 0;display:flex;flex-direction:column;justify-content:flex-start;gap:9px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 80%,transparent);mask-image:linear-gradient(#000 80%,transparent)}
.dfi-art:before{content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);width:54px;height:6px;border-radius:3px;background:#16203a}
.dfi-ex{position:absolute;top:6px;right:12px;font-style:normal;font-size:10px;font-weight:700;color:#5d6577;background:#fff;border:1px solid #d8dee9;border-radius:9px;padding:1px 7px;line-height:16px}
.dfi-eye{font-size:12px;font-weight:700;color:var(--b);letter-spacing:-.01em;margin-bottom:9px}
.dfi-slide h2{margin:0 0 12px;font-size:26px;line-height:1.3;letter-spacing:-.035em;color:var(--ink)}
.dfi-slide h2 span{font-weight:300}
.dfi-slide h2 b{font-weight:800}
.dfi-slide>p{margin:0;font-size:14.5px;line-height:1.7;color:var(--sub);word-break:keep-all}
.dfi-foot{flex:none;position:relative;padding:12px 30px 40px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.dfi-dots{display:flex}
.dfi-dots i{width:12px;height:12px;border-radius:50%;background:#fff;border:1.5px solid #cfd6e3;margin-left:-3px;transition:background .3s,border-color .3s}
.dfi-dots i:first-child{margin-left:0}
.dfi-dots i.on{background:var(--b);border-color:var(--b);position:relative;z-index:1}
.dfi-next{border:0;background:var(--b);color:#fff;font-family:inherit;font-size:15px;font-weight:700;height:50px;padding:0 26px;border-radius:14px;cursor:pointer;min-width:120px}
.dfi-tour.last .dfi-next{min-width:170px}
.dfi-later{position:absolute;left:0;right:0;bottom:10px;margin:auto;width:max-content;border:0;background:none;color:#8a93a6;font-family:inherit;font-size:13px;font-weight:500;cursor:pointer}
.dfi-later[hidden]{display:none}

/* 그림 */
.dfi-mini{background:#fff;border:1px solid var(--b);border-radius:12px;box-shadow:0 1px 4px rgba(15,37,87,.05)}
.dfi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;border:0;background:none;box-shadow:none}
.dfi-q{background:#fff;border:1px solid var(--b);border-radius:11px;padding:9px 9px 10px;display:flex;flex-direction:column;gap:2px}
.dfi-q small{font-size:9.5px;color:var(--sub)}
.dfi-q b{font-size:18px;font-weight:800;color:var(--ink)}
.dfi-q b.red{color:var(--r)}
.dfi-q b em{font-style:normal;font-size:11px}
.dfi-q.blue{background:var(--b)}
.dfi-q.blue small,.dfi-q.blue span{color:#dbe6ff;font-size:10px}
.dfi-q.blue span{margin-top:auto;font-weight:700;color:#fff}
.dfi-card{padding:11px 13px}
.dfi-card b{font-size:12px;color:var(--ink)}
.dfi-card ul{list-style:none;margin:6px 0 0;padding:0}
.dfi-card li{font-size:11px;padding:5px 0;border-top:1px solid #edf0f5;color:var(--ink)}
.dfi-card li i{font-style:normal;color:#8a93a6;margin-right:8px;font-size:10px}
.dfi-steps{display:flex;background:#fff;border:1px solid var(--b);border-radius:11px;padding:7px 8px;margin-bottom:4px}
.dfi-steps span{flex:1;text-align:center;font-size:10px;color:#8a93a6;position:relative;padding-top:14px}
.dfi-steps span:before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:9px;height:9px;border-radius:50%;border:1.5px solid #cfd6e3;background:#fff}
.dfi-steps span.on{color:var(--b);font-weight:700}
.dfi-steps span.on:before{background:var(--b);border-color:var(--b)}
.dfi-art-chat p{margin:0;max-width:78%;padding:7px 12px;border-radius:14px;font-size:11.5px;line-height:1.4}
.dfi-art-chat .me{align-self:flex-end;background:var(--b);color:#fff;border-bottom-right-radius:4px}
.dfi-art-chat .you{align-self:flex-start;background:#fff;border:1px solid #dfe4ec;border-bottom-left-radius:4px;color:var(--ink)}
.dfi-art-chat .img{padding:4px;background:#fff;border:1px solid #dfe4ec}
.dfi-art-chat .img i{display:block;width:96px;height:52px;border-radius:9px;background:linear-gradient(160deg,#dfe6f2,#c6d2e6)}
.dfi-art-chat{gap:7px}
.dfi-noti{display:flex;gap:10px;align-items:center;background:#fff;border-radius:14px;padding:11px 13px;box-shadow:0 10px 24px rgba(22,32,58,.12);margin-bottom:4px}
.dfi-noti>i{flex:none;width:30px;height:30px;border-radius:9px;background:#0b1f44;color:#fff;font:800 italic 11px inherit;font-family:inherit;display:flex;align-items:center;justify-content:center}
.dfi-noti small{display:block;font-size:9.5px;color:#8a93a6}
.dfi-noti b{display:block;font-size:12.5px;color:var(--ink)}
.dfi-noti span{font-size:10.5px;color:var(--sub)}
.dfi-inq{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.dfi-inq li{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #dfe4ec;border-radius:11px;padding:9px 12px}
.dfi-inq li.new{border-color:var(--b)}
.dfi-inq div{flex:1;display:flex;flex-direction:column}
.dfi-inq b{font-size:12px;color:var(--ink)}
.dfi-inq span{font-size:11px;color:var(--sub)}
.dfi-inq em,.dfi-doc em{font-style:normal;font-size:9px;font-weight:700;background:#16203a;color:#fff;border-radius:8px;padding:1px 6px;margin-left:4px;vertical-align:1px}
.dfi-inq .call{width:28px;height:28px;border-radius:50%;border:1.4px solid var(--ink);position:relative}
.dfi-inq .call:after{content:"";position:absolute;left:8px;top:8px;width:9px;height:9px;border:1.5px solid var(--ink);border-radius:2px 7px 2px 7px}
.dfi-bars{display:flex;align-items:flex-end;gap:6px;height:80px;margin-top:10px}
.dfi-bars i{flex:1;height:var(--h);background:#0b1f44;border-radius:3px 3px 0 0;opacity:.85}
.dfi-bars i.on{background:var(--b);opacity:1}
.dfi-doc{display:flex;align-items:center;gap:11px;padding:11px 13px}
.dfi-doc>i{width:22px;height:28px;border:1.4px solid var(--ink);border-radius:3px}
.dfi-doc div{flex:1}
.dfi-doc b{display:block;font-size:12.5px;color:var(--ink)}
.dfi-doc small{font-size:10px;color:#8a93a6}
.dfi-doc .dn{width:28px;height:28px;border-radius:50%;background:var(--b);position:relative}
.dfi-doc .dn:after{content:"";position:absolute;left:50%;top:7px;width:6px;height:6px;border-right:1.6px solid #fff;border-bottom:1.6px solid #fff;transform:translateX(-50%) rotate(45deg)}
.dfi-art-inst{align-items:center}
.dfi-grid{display:grid;grid-template-columns:repeat(4,46px);gap:16px 18px}
.dfi-grid i{width:46px;height:46px;border-radius:13px;background:#fff;border:1px solid #d8dee9}
.dfi-grid img{width:46px;height:46px;border-radius:13px;box-shadow:0 0 0 6px rgba(31,95,214,.15);animation:dfiPulse 2s ease-in-out infinite}
@keyframes dfiPulse{50%{box-shadow:0 0 0 10px rgba(31,95,214,.05)}}

/* 사용 안내 다시 보기 메뉴 */
.dfi-reopen{cursor:pointer}

@media (max-width:520px){
 .dfi-tour{background:#fff}
 .dfi-panel{width:100%;height:100%;border-radius:0;box-shadow:none;padding-top:env(safe-area-inset-top,0px)}
 .dfi-head{padding:0 10px 0 20px}
 .dfi-slide{padding:10px 24px 30px;justify-content:center}
 .dfi-art{height:min(290px,38vh);max-width:310px}
 .dfi-slide h2{font-size:24px}
 .dfi-slide>p{font-size:14px}
 .dfi-slide>p br{display:none}
 .dfi-foot{padding:12px 24px calc(42px + env(safe-area-inset-bottom,0px))}
 .dfi-later{bottom:calc(10px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){.dfi-splash *{animation:none!important;opacity:1!important;transform:none!important}.dfi-slide{transition:none!important}}

/* 1.2.0 알림 켜기 화면 */
.dfi-push{--b:#1f5fd6;--ink:#16203a;--sub:#5d6577;--g:#eef1f6;position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;background:#fff;font-family:"Pretendard Variable",Pretendard,sans-serif;-webkit-font-smoothing:antialiased;transition:opacity .3s ease;padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)}
.dfi-push[hidden]{display:none!important}
.dfi-push.out{opacity:0}
.dfi-push *{box-sizing:border-box}
.dfi-push-in{width:min(400px,100%);padding:0 28px;text-align:center}
.dfi-push-art{display:flex;flex-direction:column;gap:10px;padding:26px 18px;margin:0 0 28px;border-radius:22px;background:var(--g)}
.dfi-push .dfi-noti{display:flex;gap:10px;align-items:center;text-align:left;padding:11px 13px;border-radius:14px;background:#fff;box-shadow:0 6px 18px rgba(22,32,58,.1)}
.dfi-push .dfi-noti i{flex:none;width:34px;height:34px;border-radius:9px;background:var(--b);color:#fff;font-style:normal;font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center}
.dfi-push .dfi-noti div{min-width:0}
.dfi-push .dfi-noti small{display:block;font-size:10.5px;color:var(--sub)}
.dfi-push .dfi-noti b{display:block;font-size:13px;color:var(--ink);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dfi-push .dfi-noti span{display:block;font-size:11.5px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dfi-push .dfi-noti2{opacity:.6;transform:scale(.96)}
.dfi-push .dfi-eye{display:inline-block;font-size:12px;font-weight:600;color:var(--b);margin:0 0 8px}
.dfi-push h2{margin:0 0 10px;font-size:23px;line-height:1.35;color:var(--ink);letter-spacing:-.03em;font-weight:300}
.dfi-push h2 b{font-weight:800;display:block}
.dfi-push p{margin:0 0 26px;font-size:13.5px;line-height:1.65;color:var(--sub)}
.dfi-push-go{display:block;width:100%;height:52px;border:0;border-radius:14px;background:var(--b);color:#fff;font-family:inherit;font-size:15.5px;font-weight:700;cursor:pointer}
.dfi-push-later{display:block;width:100%;height:44px;margin-top:6px;border:0;background:none;color:var(--sub);font-family:inherit;font-size:13.5px;cursor:pointer}
.dfi-push-note{display:block;margin-top:10px;font-size:11.5px;color:#8a92a3}
.dfi-push-note b{color:var(--ink);font-weight:600}

/* 1.2.1 MyDF 마크 */
.dfi-splash h1{font-size:44px;letter-spacing:0;display:flex;align-items:baseline;justify-content:center;gap:3px}
.dfi-splash h1 span{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;font-size:.56em;color:#cfe0ff}
.dfi-splash h1 b{font-weight:800;letter-spacing:.01em}
.dfi-noti>i,.dfi-push .dfi-noti i{background:linear-gradient(150deg,#3274f2,#1f5fd6 55%,#1a50bd)!important;font-style:normal!important;font-weight:800!important;font-family:"Pretendard Variable",Pretendard,sans-serif!important;align-items:center;gap:1px;letter-spacing:0}
.dfi-noti>i em{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;font-size:.72em;color:#d6e4ff;transform:translateY(1px)}