* { box-sizing: border-box; margin: 0; padding: 0; }
       html { scroll-behavior: smooth; }
       body { font-family: 'Noto Sans KR', 'Malgun Gothic', '맑은 고딕', sans-serif; font-size: 14px; color: #333; background-color: #f8f9fa; line-height: 1.6; font-weight: 400; margin: 0; padding: 20px; }
       a { text-decoration: none; color: inherit; }
       ul, ol { list-style: none; padding:0; margin:0; } 
       button { cursor: pointer; font-family: inherit; border: none; background: none; padding: 0; }
       img { max-width: 100%; height: auto; display: block; }
       h1, h2, h3, h4, h5, h6, .logo-text { font-weight: 600; }
       h1.post-title, h2.sub-title { font-weight: 700; }

       :root {
        --card-border-radius: 8px;
        --theme-color: #8A2BE2; 
        --theme-color-dark: #7022b8; 
        --accent-color-orange: #ff7e00; 
        --content-width: 1100px; 
        --side-padding: 20px; 
        --light-theme-bg: #f2e8ff; 
        --highlight-bg: #d9c3ff; 
       }

       .breadcrumb-nav { max-width: var(--content-width); margin: 15px auto 0 auto; padding: 0 var(--side-padding); }
       .breadcrumb { display: flex; flex-wrap: wrap; padding: 10px 15px; margin-bottom: 1rem; list-style: none; background-color: #e9ecef; border-radius: 6px; font-size: 0.9em; }
       .breadcrumb-item { display: flex; align-items: center; }
       .breadcrumb-item + .breadcrumb-item::before { display: inline-block; padding-right: .5rem; padding-left: .5rem; color: #6c757d; content: "/"; }
       .breadcrumb-item a { color: var(--theme-color); text-decoration: none; } 
       .breadcrumb-item a:hover { text-decoration: underline; }
       .breadcrumb-item.active { color: #6c757d; font-weight: 500; }

       .blog-post-wrap { 
            font-family: 'Noto Sans KR', 'Malgun Gothic', '맑은 고딕', sans-serif;
            line-height: 1.75;
            color: #333;
            padding: 30px;
            background-color: #ffffff;
            border: 1px solid #e0e0e0;
            border-radius: var(--card-border-radius);
            word-break: keep-all; 
            max-width: var(--content-width); 
            margin: 20px auto 30px auto;
            box-shadow: 0 3px 10px rgba(0,0,0,0.05);
       }

       .blog-post-wrap h1.post-title { font-size: 28px; color: var(--theme-color-dark); margin-bottom: 25px; padding-bottom: 20px; border-bottom: 2px solid var(--theme-color); text-align: center; }
       .blog-post-wrap .page-subtitle-text { font-size: 1.1em; text-align: left; color: #555; margin-bottom: 30px; line-height: 1.8; padding: 20px; border-radius:var(--card-border-radius); background-color: var(--light-theme-bg); }
       .blog-post-wrap h2.sub-title { font-size: 22px; color: var(--theme-color-dark); margin-top: 40px; margin-bottom: 20px; padding-left: 15px; border-left: 4px solid var(--theme-color); display: flex; align-items: center; }
       .blog-post-wrap h2.sub-title:first-of-type { margin-top: 0; }
       .blog-post-wrap h2.sub-title i { margin-right: 10px; font-size: 1em; color: var(--theme-color); } 
       .blog-post-wrap h1.post-title i { color: var(--theme-color); }
       .blog-post-wrap h3.content-subtitle { font-size: 18px; color: var(--theme-color-dark); margin-top: 30px; margin-bottom: 15px; font-weight: 600; padding-left: 0; border-left: none; } 
       .blog-post-wrap p { margin-bottom: 18px; font-size: 15px; color: #444; line-height: 1.8;}
       .blog-post-wrap .intro-image { margin: 25px auto; border-radius: var(--card-border-radius); overflow: hidden; border: 1px solid #eee; box-shadow: 0 2px 6px rgba(0,0,0,0.07); max-width: 700px;}
       .blog-post-wrap .intro-image img { display: block; width: 100%; height: auto; }
        
       .blog-post-wrap strong { font-weight: 600; } 
       .blog-post-wrap strong.theme-strong { color: var(--theme-color-dark); } 
       .blog-post-wrap strong.highlight { background-color: var(--highlight-bg); padding: 3px 6px; border-radius: 4px; font-weight: 600; color: var(--theme-color-dark); }
       
       .blog-post-wrap ul.features-list, .blog-post-wrap ol.step-list { 
           list-style: none; 
           padding-left: 0; 
           margin: 20px 0; 
           border-left: none; 
       }
       .blog-post-wrap ul.features-list li, .blog-post-wrap ol.step-list li { 
           margin-bottom: 10px; 
           padding-left: 25px; 
           font-size: 15px; 
           color: #555; 
           position: relative;
       }
       .blog-post-wrap ul.features-list li::before {
           content: '\f00c'; 
           font-family: 'Font Awesome 6 Free';
           font-weight: 900;
           color: var(--theme-color);
           position: absolute;
           left: 0;
           top: 1px;
       }
        .blog-post-wrap ol.step-list li::before {
           content: attr(data-step);
           position: absolute;
           left: -5px;
           top: -2px;
           font-size: 1.2em;
           font-weight: 900;
           color: var(--theme-color);
           font-family: 'Georgia', serif;
       }

       .blog-post-wrap .important-notice {
           background-color: #fff3cd; 
           border: 1px solid #ffeeba; 
           color: #856404; 
           padding: 15px 20px;
           margin: 25px 0;
           border-radius: var(--card-border-radius);
           font-size: 0.95em;
       }
       .blog-post-wrap .important-notice strong { color: #664d03; }
       .blog-post-wrap .important-notice p { margin-bottom: 5px; }
       .blog-post-wrap .important-notice p:last-child { margin-bottom: 0; }


       .blog-post-wrap a.internal-link { color: var(--theme-color); font-weight: 500; text-decoration: none; border-bottom: 1px dotted var(--theme-color); transition: color 0.2s, border-color 0.2s; }
       .blog-post-wrap a.internal-link:hover { color: var(--theme-color-dark); border-bottom-color: var(--theme-color-dark); }
       .blog-post-wrap .final-comment { margin-top: 40px; font-style: normal; color: #666; text-align: center; border-top: 1px dashed #ddd; padding-top: 30px; font-size: 16px; font-weight: bold;}

       .blog-post-wrap .section-divider {
            border: 0;
            height: 1px;
            background-image: linear-gradient(to right, rgba(255, 255, 255, 0), var(--theme-color-dark), rgba(255, 255, 255, 0));
            margin-top: 40px;
            margin-bottom: 40px;
        }

       @media (max-width: 992px) {
            .blog-post-wrap { padding: 20px; }
       }
       @media (max-width: 768px) {
            .breadcrumb-nav { padding: 0 10px; margin-top: 10px; } 
            .blog-post-wrap h1.post-title { font-size: 24px; }
            .blog-post-wrap h2.sub-title { font-size: 20px; }
       }
        @media (max-width: 576px) {
            body { padding: 10px; }
            .blog-post-wrap { padding: 15px; }
            .blog-post-wrap .intro-image img { max-height: 250px; }
            .blog-post-wrap h1.post-title { font-size: 22px; }
            .blog-post-wrap h2.sub-title { font-size: 18px; }
        }