@charset "utf-8";

:root {
    --mna-blue: #3B9EE8;
    --mna-blue-dark: #2280C8;
    --mna-blue-light: #EBF5FC;
    --mna-blue-100: #B5D4F4;
    --mna-text: #1a1a1a;
    --mna-muted: #666;
    --mna-muted-light: #999;
    --mna-border: #e5e7eb;
    --mna-bg: #f7f8fa;
    --mna-white: #fff;
    --mna-snb-width: 265px;
    --mna-hdr-height: 54px;
    --mna-radius-sm: 6px;
    --mna-radius-md: 10px;
    --mna-radius-lg: 14px;
}

body{color:var(--mna-text);min-height:100vh}
#manual{font-size:15px}
#manual .hdr{position:sticky;top:0;z-index:200;display:flex;align-items:center;gap:10px;padding:0 24px;height:var(--mna-hdr-height);background:var(--mna-white);border-bottom:1px solid var(--mna-border)}
#manual .logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px;color:var(--mna-blue);text-decoration:none}
#manual .logo img{width:120px}
#manual .logo-box{display:flex;align-items:center;gap:10px}
#manual .hdr-center{font-size:14px;color:var(--mna-muted);margin-top:4px}
#manual .hdr-right{margin-left:auto;display:flex;align-items:center;gap:8px}
#manual .hdr-btn{font-size:14px;color:var(--mna-muted);padding:6px 12px;border:1px solid var(--mna-border);border-radius:var(--mna-radius-sm);background:var(--mna-white);cursor:pointer;text-decoration:none;transition:color .15s,border-color .15s}
#manual .hdr-btn:hover{color:var(--mna-blue);border-color:var(--mna-blue-100)}
#manual .mob-menu-btn{display:none;background:none;border:none;cursor:pointer;color:var(--mna-text);padding:4px;line-height:1}
#manual .mob-menu-btn svg{width:24px;height:24px}
.search-wrap{display:flex;max-width:460px;margin:0 auto;position:relative}
.search-wrap input{width:100%;padding:13px 16px 13px 44px;border:1.5px solid var(--mna-border);border-radius:var(--mna-radius-md);font-size:14px;font-family:'Noto Sans KR',sans-serif;color:var(--mna-text);background:var(--mna-white);outline:none;transition:border-color .2s}
.search-wrap input::placeholder{color:var(--mna-muted-light)}
.search-wrap input:focus{border-color:var(--mna-blue)}
.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--mna-muted-light);pointer-events:none}
#manual .hero{text-align:center;padding:56px 24px 0;background:var(--mna-white)}
#manual .hero h1{font-size:34px;font-weight:700;color:var(--mna-text);margin-bottom:10px;line-height:1.25}
#manual .hero p{font-size:18px;color:var(--mna-muted);margin-bottom:16px;line-height:1.45;word-break:keep-all}
#manual .main{max-width:800px;margin:0 auto;padding:40px 24px 60px}
#manual .cards-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:60px}
#manual .card{background:var(--mna-white);border:1.5px solid var(--mna-border);border-radius:var(--mna-radius-lg);padding:24px 20px 20px 24px;cursor:pointer;text-decoration:none;color:inherit;transition:border-color .2s,box-shadow .2s,transform .15s;display:block}
#manual .card:hover{border-color:var(--mna-blue);box-shadow:0 4px 20px #3b9ee81f;transform:translateY(-2px)}
#manual .card-icon{width:44px;height:44px;border-radius:10px;background:var(--mna-blue-light);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
#manual .card-icon svg{width:22px;height:22px;color:var(--mna-blue)}
#manual .card h3{font-size:19px;font-weight:700;color:var(--mna-text);margin-bottom:10px}
#manual .card p{font-size:15px;color:var(--mna-muted);line-height:1.65}
#manual .card-arrow{display:flex;align-items:center;gap:4px;margin-top:16px;font-size:14px;color:var(--mna-blue);font-weight:600}
#manual .card-arrow svg{width:18px;height:18px}
#manual .faq-section{margin-bottom:60px}
#manual .faq-section h2{font-size:22px;font-weight:700;margin-bottom:16px}
#manual .faq-list{border-top:1px solid var(--mna-border)}
#manual .faq-item{border-bottom:1px solid var(--mna-border)}
#manual .faq-q{display:flex;align-items:center;justify-content:space-between;padding:20px 12px;cursor:pointer;font-size:16px;font-weight:500;color:var(--mna-text);user-select:none;gap:12px}
#manual .faq-q:hover{color:var(--mna-blue)}
#manual .faq-q svg{color:var(--mna-muted-light);width:18px;height:18px;transition:transform .25s;flex-shrink:0}
#manual .faq-item.open .faq-q svg{transform:rotate(90deg);color:var(--mna-blue)}
#manual .faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s;font-size:15px;font-weight:400;color:var(--mna-muted);line-height:1.8;padding:0 12px}
#manual .faq-item.open .faq-a{max-height:200px;padding-bottom:16px}
#manual .cta-box{background:var(--mna-blue-light);border-radius:var(--mna-radius-lg);padding:36px 24px;text-align:center}
#manual .cta-box h3{font-size:20px;font-weight:700;margin-bottom:12px;line-height:1.45}
#manual .cta-box p{font-size:14px;color:var(--mna-muted);margin-bottom:22px}
#manual .cta-btn{display:inline-flex;align-items:center;gap:8px;background:var(--mna-white);border:1.5px solid var(--mna-blue);color:var(--mna-blue);font-size:14px;font-weight:700;font-family:'Noto Sans KR',sans-serif;padding:11px 24px;border-radius:var(--mna-radius-md);cursor:pointer;transition:background .2s,color .2s}
#manual .cta-btn:hover{background:var(--mna-blue);color:var(--mna-white)}
#manual .cta-btn svg{transform:scaleX(-1);width:19px;height:19px}
#manual footer{background:var(--mna-white);border-top:1px solid var(--mna-border);padding:24px;text-align:center;font-size:13px;color:var(--mna-muted-light)}
#manual .body-wrap{display:flex;min-height:calc(100vh - var(--mna-hdr-height))}
#manual .snb-overlay{display:none;position:fixed;inset:0;background:#0006;z-index:201;backdrop-filter:blur(1px)}
#manual .snb-overlay.show{display:none}
#manual .snb{width:var(--mna-snb-width);min-width:var(--mna-snb-width);background:var(--mna-white);border-right:1px solid var(--mna-border);position:sticky;top:var(--mna-hdr-height);height:calc(100vh - var(--mna-hdr-height));overflow-y:auto;font-size:12px;flex-shrink:0}
#manual .snb.index{display:none}
#manual .snb-section-label{font-size:13px;font-weight:600;color:var(--mna-muted-light);padding:16px 16px 6px}
#manual .snb-toggle{display:flex;align-items:center;justify-content:space-between;padding:9px 16px;cursor:pointer;font-size:15px;font-weight:700;color:var(--mna-text);user-select:none;text-decoration:none}
#manual .snb-toggle:hover{background:var(--mna-bg)}
#manual .snb-toggle.current-page{color:var(--mna-blue);background:var(--mna-blue-light)}
#manual .snb-toggle .chev{width:16px;height:16px;color:var(--mna-muted-light);transition:transform .22s;flex-shrink:0}
#manual .snb-group.open .snb-toggle .chev{transform:rotate(90deg)}
#manual .snb-sub{max-height:0;overflow:hidden}
#manual .snb-group.open .snb-sub{max-height:500px}
#manual .snb-link{display:block;padding:7px 16px 7px 26px;color:var(--mna-muted);font-size:14px;cursor:pointer;border-right:2px solid transparent;text-decoration:none}
#manual .snb-link:hover{color:var(--mna-blue);background:var(--mna-blue-light)}
#manual .snb-link.active{color:var(--mna-blue);font-weight:700;border-right-color:var(--mna-blue);background:var(--mna-blue-light)}
#manual .snb-divider{height:1px;background:var(--mna-border);margin:8px 0}
#manual .snb-close-row{display:none;align-items:center;justify-content:space-between;padding:8px 12px 8px 16px;border-bottom:1px solid var(--mna-border);font-size:15px;font-weight:700}
#manual .snb-close-row button{background:none;border:none;cursor:pointer;color:var(--mna-muted);padding:4px;line-height:1}
#manual .snb-close-row button svg{width:22px;height:22px;color:#111}
#manual .content{flex:1;padding:32px 40px 60px;min-width:0;background:var(--mna-bg)}
#manual .breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:4px;font-size:11px;color:var(--mna-muted-light);margin-bottom:18px}
#manual .breadcrumb a{color:var(--mna-muted-light);text-decoration:none}
#manual .breadcrumb a:hover{color:var(--mna-blue)}
#manual .breadcrumb .sep{font-size:10px}
#manual .breadcrumb .cur{color:var(--mna-blue);font-weight:500}
#manual .content-title{font-size:22px;font-weight:700;color:var(--mna-text);padding-bottom:14px;border-bottom:2.5px solid var(--mna-blue);margin-bottom:28px}
#manual .content-title span{display:block;margin-top:10px;font-size:15px;font-weight:400;color:var(--mna-muted)}
#manual .step-block{margin-bottom:36px}
#manual .step-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;scroll-margin-top:calc(var(--mna-hdr-height) + 20px)}
#manual .step-num{width:24px;height:24px;border-radius:50%;background:var(--mna-blue);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
#manual .step-head h3{font-size:18px;font-weight:700;color:var(--mna-text)}
#manual .step-list{list-style:none;padding:0;margin-bottom:12px}
#manual .step-sub-list{padding-left:20px}
#manual .step-sub-list li:before{content:"- "}
#manual .step-list .num{width:20px;height:20px;border-radius:50%;border:1px solid var(--mna-muted);font-size:12px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
#manual .step-list li{font-size:15px;color:var(--mna-muted);line-height:1.9;padding-left:2px}
#manual .step-list li strong{color:var(--mna-text);font-weight:700}
#manual .img-box{display:flex;gap:15px;justify-content:center;align-items:center;padding:15px;border:1.5px solid var(--mna-border);border-radius:10px;background:#fff;margin-top:10px}
#manual .img-box img{border-radius:10px;box-shadow:3px 3px 8px #0000000d;max-width:100%;height:auto}
#manual .img-box.pc{display:flex}
#manual .img-box.mo{display:none}
#manual .img-box-txt-wrap{gap:24px;display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}
#manual .img-box-txt{overflow:hidden;border:1.5px solid var(--mna-border);border-radius:10px;background:#fff}
#manual .img-box-txt img{width:100%}
#manual .img-box-txt p{padding:15px;color:#fff;text-align:center;background:#0006;word-break:keep-all}
#manual .img-box-txt p .num{width:20px;height:20px;border-radius:50%;border:1px solid #fff;font-size:12px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
@media (max-width: 768px) {
#manual .mob-menu-btn{display:flex}
#manual .logo-box{gap:6px}
#manual .hdr-center{font-size:12px}
#manual .snb-overlay.show{display:block}
#manual .snb{position:fixed;top:0;right:0;height:100vh;z-index:202;transform:translateX(100%)}
#manual .snb.index{display:block}
#manual .snb.open{transform:translateX(0)}
#manual .snb-close-row{display:flex}
#manual .content{padding:20px 16px 60px}
#manual .content-title{font-size:18px;margin-bottom:20px}
#manual .img-box.pc{display:none}
#manual .img-box.mo{display:flex;flex-direction:column}
}
@media (max-width: 640px) {
#manual .hdr{gap:8px;padding:0 12px;height:50px}
#manual .hdr-btn{padding:5px 10px;font-size:12px}
#manual .hero{padding:36px 16px 0}
#manual .hero h1{font-size:22px}
#manual .hero p{font-size:13px;margin-bottom:0}
#manual .main{padding:28px 16px 48px}
#manual .cards-grid{grid-template-columns:1fr;gap:12px;margin-bottom:36px}
#manual .card{padding:20px 16px 16px}
#manual .card-icon{width:38px;height:38px;margin-bottom:12px}
#manual .card h3{font-size:16px}
#manual .card p{font-size:13px}
#manual .faq-section{margin-bottom:36px}
#manual .faq-section h2{font-size:18px}
#manual .faq-q{font-size:14px;padding:15px 6px}
#manual .faq-a{padding:0 6px}
#manual .faq-item.open .faq-a{font-size:13px}
#manual .cta-box{padding:28px 16px}
#manual .cta-box h3{font-size:16px}
#manual .cta-btn{font-size:13px;padding:10px 20px}
#manual .content{padding:18px 12px 48px}
#manual .content-title{font-size:16px}
#manual .step-head h3{font-size:16px}
#manual .step-list li{font-size:13px}
}
@media (max-width: 380px) {
#manual .hero h1{font-size:19px}
#manual .logo img{width:110px}
}