@charset "UTF-8";:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;padding:0;min-width:320px;min-height:100vh;width:100vw;max-width:none}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Segoe UI,Helvetica Neue,Arial,sans-serif;background:#f8fafc;color:#334155;line-height:1.6;min-height:100vh}.header{background:#1a202c;color:#fff;padding:1rem 0;position:sticky;top:0;z-index:100;box-shadow:0 4px 20px #00000026}.header *{color:#fff!important}.header-container{width:100%;max-width:none;margin:0;padding:0 2rem}.header-content{display:flex;justify-content:space-between;align-items:center}.profile-section{display:flex;align-items:center;gap:1rem}.profile-image{width:50px;height:50px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,.3)}.blog-title{font-size:1.5rem;font-weight:700;margin:0}.blog-subtitle{font-size:.9rem;opacity:.9;margin:0}.github-links-header{display:flex;gap:1rem;align-items:center;margin-left:-2rem}.site-link-header{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.5rem .75rem;border-radius:8px;text-decoration:none;color:#fff;transition:all .3s ease;border:1px solid transparent;min-width:60px;background:#ffffff1a}.site-link-header:hover{background:#fff3;border-color:#ffffff4d;transform:translateY(-2px)}.site-link-header .site-icon{font-size:1.2rem;text-align:center}.site-link-header .site-name{font-weight:600;font-size:.7rem;text-align:center}.main-layout{display:grid;grid-template-columns:350px 1fr;gap:2rem;width:100%;max-width:none;margin:2rem 0;padding:0 2rem}.sidebar{position:sticky;top:100px;height:fit-content}.sidebar-content{display:flex;flex-direction:column;gap:2rem}.profile-card{background:#fff;border-radius:16px;padding:2rem;text-align:center;box-shadow:0 4px 20px #00000014;border:1px solid #e2e8f0}.profile-avatar{margin-bottom:1rem}.avatar-image{width:80px;height:80px;border-radius:50%;object-fit:cover;border:none}.profile-name{font-size:1.25rem;font-weight:700;color:#1e293b;margin-bottom:.5rem}.profile-bio{color:#64748b;font-size:.9rem;margin-bottom:1.5rem}.social-links{display:flex;justify-content:center;gap:1rem}.social-link{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:#f1f5f9;border-radius:50%;color:#64748b;text-decoration:none;transition:all .3s ease}.social-link:hover{background:#667eea;color:#fff;transform:translateY(-2px)}.sidebar-section{background:#fff;border-radius:16px;padding:1.5rem;box-shadow:0 4px 20px #00000014;border:1px solid #e2e8f0}.sidebar-title{font-size:1.1rem;font-weight:700;color:#1e293b;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}.sidebar-items{display:flex;flex-direction:column;gap:.5rem;max-height:600px;overflow-y:auto}.sidebar-item{display:flex;align-items:center;gap:.5rem;padding:.75rem;border-radius:12px;text-decoration:none;color:#334155;transition:all .3s ease;border:1px solid transparent;cursor:pointer}.sidebar-item:hover{background:#f8fafc;border-color:#e2e8f0;transform:translate(4px)}.item-date{font-size:.75rem;color:#64748b;font-weight:600;background:#f1f5f9;padding:.2rem .5rem;border-radius:4px;width:fit-content}.item-title{font-size:.85rem;font-weight:500;line-height:1.3;flex:1}.recent-posts{display:flex;flex-direction:column;gap:.75rem}.recent-post{display:flex;flex-direction:column;gap:.25rem;padding:.75rem;border-radius:12px;text-decoration:none;color:#334155;transition:all .3s ease}.recent-post:hover{background:#f8fafc;transform:translate(4px)}.post-date{font-size:.8rem;color:#64748b;font-weight:500}.post-title{font-size:.9rem;font-weight:600}.main-content{display:flex;flex-direction:column;gap:2rem}.result-section{width:100%;height:calc(100vh - 200px)}.result-container{background:#fff;border-radius:16px;width:100%;height:100%;display:flex;flex-direction:column;box-shadow:0 4px 20px #00000014;border:1px solid #e2e8f0}.result-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 2rem;border-bottom:1px solid #e2e8f0;background:#f8fafc;border-radius:16px 16px 0 0}.result-title{font-size:1.8rem;font-weight:700;color:#1e293b;margin:0}.result-content{flex:1;padding:1.5rem;overflow:auto;font-size:1.1rem;line-height:1.7}.welcome-message{text-align:center;color:#64748b;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}.welcome-message h2{font-size:2.5rem;font-weight:700;color:#1e293b;margin-bottom:1rem}.welcome-message p{font-size:1.3rem;line-height:1.6}.description-box{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:1.5rem;margin-bottom:1.5rem}.description-text{color:#475569;font-size:1.1rem;line-height:1.6;margin:0}.loading-fallback{display:flex;align-items:center;justify-content:center;height:200px;color:#64748b;font-size:1.3rem}.error-container{background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:1.5rem;color:#dc2626;font-size:1.1rem}.error-container h3{margin-bottom:1rem;color:#dc2626;font-size:1.3rem}.error-detail{font-size:1.1rem;margin-top:.5rem;color:#991b1b}.footer{background:#1e293b;color:#fff;margin-top:4rem;padding:3rem 0 1rem}.footer-container{max-width:1200px;margin:0 auto;padding:0 2rem}.footer-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin-bottom:2rem}.footer-section h4{font-size:1.1rem;font-weight:700;margin-bottom:1rem;color:#f1f5f9}.footer-section p{color:#94a3b8;line-height:1.6}.tech-stack{display:flex;flex-wrap:wrap;gap:.5rem}.tech-item{background:#334155;color:#f1f5f9;padding:.25rem .75rem;border-radius:20px;font-size:.8rem;font-weight:500}.contact-info p{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}.contact-info i{color:#667eea;width:16px}.footer-bottom{border-top:1px solid #334155;padding-top:1rem;text-align:center;color:#94a3b8;font-size:.9rem}@media (max-width: 1024px){.main-layout{grid-template-columns:1fr;gap:1rem}.sidebar{position:static;order:2}.sidebar-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}.result-section{height:60vh}}@media (max-width: 768px){.header-content{flex-direction:column;gap:1rem;text-align:center}.github-links-header{justify-content:center}.main-layout{padding:0 1rem}.footer-content{grid-template-columns:1fr;text-align:center}}@media (max-width: 480px){.welcome-message h2{font-size:1.5rem}.result-title{font-size:1.2rem}}.component-container{max-width:800px;margin:0 auto;padding:20px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.component-title{color:#007bff;text-align:center;margin-bottom:30px;font-size:2rem;font-weight:600}.comment-list-container{max-width:600px;margin:0 auto}.comment-list-title{color:#333;margin-bottom:20px;font-size:1.5rem;font-weight:500;text-align:center}.comment-wrapper{margin:8px;padding:16px;display:flex;flex-direction:row;border:1px solid #e0e0e0;border-radius:12px;background:#fff;box-shadow:0 2px 4px #0000001a;transition:transform .2s ease,box-shadow .2s ease}.comment-wrapper:hover{transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.comment-image-container{margin-right:12px;flex-shrink:0}.comment-image{width:50px;height:50px;border-radius:25px;object-fit:cover;border:2px solid #007bff}.comment-content-container{display:flex;flex-direction:column;justify-content:center;flex:1}.comment-name-text{color:#333;font-size:16px;font-weight:600;margin-bottom:4px}.comment-text{color:#666;font-size:14px;line-height:1.4}.comment-form-container{max-width:600px;margin:20px auto;padding:20px;background:#f8f9fa;border-radius:12px;border:1px solid #e9ecef}.comment-form-title{color:#333;margin-bottom:20px;font-size:1.2rem;font-weight:500;text-align:center}.comment-form{display:flex;flex-direction:column;gap:15px}.form-group{display:flex;flex-direction:column;gap:5px}.form-label{color:#495057;font-weight:500;font-size:14px}.form-input,.form-textarea{padding:10px 12px;border:1px solid #ced4da;border-radius:6px;font-size:14px;transition:border-color .2s ease,box-shadow .2s ease}.form-input:focus,.form-textarea:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px #007bff1a}.form-textarea{resize:vertical;min-height:80px}.form-button{background:#007bff;color:#fff;border:none;padding:12px 24px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s ease;align-self:flex-start}.form-button:hover{background:#0056b3}.form-button:active{transform:translateY(1px)}@media (max-width: 768px){.component-container{padding:15px}.comment-wrapper{margin:6px;padding:12px}.comment-image{width:40px;height:40px;border-radius:20px}.comment-name-text{font-size:14px}.comment-text{font-size:13px}.comment-form-container{margin:15px auto;padding:15px}.form-button{align-self:stretch}}*{margin:0;padding:0;color:#333}a{text-decoration:none;color:#333}li{list-style:none}img{width:100%;vertical-align:top}#wrap{width:100%;display:flex;flex-wrap:wrap;position:relative}#aside{width:200px;height:650px}#aside .logo{width:100%;height:100px;display:flex;align-items:center;justify-content:center}#aside .logo a{display:block;font-size:26px;margin-top:5px}#aside .nav{height:550px}#aside .nav>ul{margin:5px}#aside .nav>ul>li{margin-bottom:5px}#aside .nav>ul>li>a{padding:10px;display:inline-block;background-color:#ffd139;width:100%;text-align:center;box-sizing:border-box;border:2px solid #dead0c}#aside .nav>ul>li>a:hover{text-decoration:underline}#aside .nav>ul>li>ul{display:none}#aside .nav>ul>li>ul>li a{display:block;padding:10px;background-color:#ffebab;text-align:center;border-bottom:2px solid #dead0c}#aside .nav>ul>li>ul>li a:hover{background-color:#ffe281}#main{width:calc(100% - 200px)}#slider{width:100%;display:flex;overflow:hidden}#slider .imageWrap{width:calc(100% - 230px);height:400px}#slider .imageWrap .image{background-size:cover;background-position:center;width:100%;height:100%;display:flex;align-items:end}#slider .imageWrap .image .text{background-color:#dead0c8f;width:100%;padding:20px}#slider .imageWrap .image .text h2{color:#fff;margin-bottom:5px;font-size:30px}#slider .imageWrap .image .text p{color:#fff;font-size:16px}#slider .banner{width:230px;height:400px;display:flex;align-items:center;justify-content:center;flex-direction:column;border:10px solid #ffd139;box-sizing:border-box;transition:all .3s}#slider .banner:hover{border:5px solid #ffd139}#slider .banner h3{color:#fff;font-size:30px;margin-bottom:20px}#slider .banner h3 em{color:#ffd139;font-style:normal;display:block}#slider .banner a{background-color:#fff;padding:10px 20px;border-radius:50px}#contents{width:100%;display:flex}#contents .notice{width:50%;height:250px;padding:30px;box-sizing:border-box;background-color:#fff6d6;position:relative}#contents .notice h3{font-size:26px;margin-bottom:10px}#contents .notice li{display:flex;line-height:1.7;position:relative;padding-left:16px}#contents .notice li:before{content:"";width:6px;height:6px;background-color:#a58109;border-radius:50%;position:absolute;left:0;top:8px}#contents .notice li a{width:75%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#contents .notice li a:hover{text-decoration:underline}#contents .notice li span{width:25%;text-align:right}#contents .notice .more{position:absolute;right:30px;top:30px}#contents .notice .more:hover{text-decoration:underline}#contents .gallery{width:50%;height:250px;padding:30px;box-sizing:border-box}#contents .gallery h3{font-size:26px;margin-bottom:10px}#contents .gallery ul{display:flex}#contents .gallery li{width:120px;margin-right:10px}#contents .gallery li a{display:block}#contents .gallery li a span{padding:10px 0;display:inline-block}#contents .gallery li a span:hover{text-decoration:underline}#footer{width:100%;height:100px;display:flex;align-items:center;background-color:#fffbea}#footer .footer1{width:200px;display:flex;align-items:center;justify-content:center}#footer .footer1 h4{font-size:20px;color:#858585}#footer .footer2{width:calc(100% - 430px);line-height:1.5}#footer .footer3{width:230px}#footer .footer3 select{width:90%;height:30px}.popup-view{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:300px;height:300px;background-color:#fff8e2;border:8px solid #ffe17d;padding:20px;display:none}.popup-view h3{font-size:24px;margin-bottom:15px;border-bottom:2px solid #333;padding-bottom:5px}.popup-close{background-color:#ffc400;padding:8px 20px;display:inline-block;color:#fff;position:absolute;left:50%;transform:translate(-50%);bottom:20px}.test2508-container{width:100%;max-width:100%;height:auto;overflow:hidden;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a}.test2508-container #wrap{width:100%;display:flex;flex-wrap:wrap;position:relative;min-height:600px}.test2508-container #aside{width:180px;height:600px;background:#fff;border-right:1px solid #eee}.test2508-container #aside .logo{width:100%;height:80px;display:flex;align-items:center;justify-content:center;background:#ffd139}.test2508-container #aside .logo a{display:block;font-size:20px;font-weight:700;color:#333}.test2508-container #aside .nav{height:520px;padding:10px 0}.test2508-container #aside .nav>ul>li>a{padding:8px;font-size:14px;background-color:#ffd139;border:1px solid #dead0c}.test2508-container #aside .nav>ul>li>ul>li a{padding:6px;font-size:12px;background-color:#ffebab;border-bottom:1px solid #dead0c}.test2508-container #main{width:calc(100% - 180px);flex:1}.test2508-container #slider{width:100%;display:flex;overflow:hidden;height:300px}.test2508-container #slider .imageWrap{width:calc(100% - 200px);height:300px}.test2508-container #slider .imageWrap .image .text{padding:15px}.test2508-container #slider .imageWrap .image .text h2{font-size:24px;margin-bottom:5px}.test2508-container #slider .imageWrap .image .text p{font-size:14px}.test2508-container #slider .banner{width:200px;height:300px;border:5px solid #ffd139}.test2508-container #slider .banner h3{font-size:24px;margin-bottom:15px}.test2508-container #contents{width:100%;display:flex;height:200px}.test2508-container #contents .notice{width:50%;height:200px;padding:20px}.test2508-container #contents .notice h3{font-size:20px;margin-bottom:10px}.test2508-container #contents .notice li{font-size:13px;line-height:1.5}.test2508-container #contents .gallery{width:50%;height:200px;padding:20px}.test2508-container #contents .gallery h3{font-size:20px;margin-bottom:10px}.test2508-container #contents .gallery li{width:80px;margin-right:8px}.test2508-container #contents .gallery li a span{padding:5px 0;font-size:12px}.test2508-container #footer{width:100%;height:80px;background-color:#fffbea;border-top:1px solid #eee}.test2508-container #footer .footer1{width:180px}.test2508-container #footer .footer1 h4{font-size:16px}.test2508-container #footer .footer2{width:calc(100% - 380px);font-size:12px;line-height:1.4}.test2508-container #footer .footer3{width:200px}.test2508-container #footer .footer3 select{width:90%;height:25px;font-size:12px}.test2508-container .popup-view{width:280px;height:280px;padding:15px}.test2508-container .popup-view h3{font-size:20px;margin-bottom:10px}.test2508-container .popup-view p{font-size:13px;line-height:1.4}.test2508-container .popup-close{padding:6px 15px;font-size:12px;bottom:15px}@media (max-width: 768px){.test2508-container #wrap{flex-direction:column}.test2508-container #aside{width:100%;height:auto;border-right:none;border-bottom:1px solid #eee}.test2508-container #main{width:100%}.test2508-container #slider{flex-direction:column;height:auto}.test2508-container #slider .imageWrap{width:100%;height:200px}.test2508-container #slider .banner{width:100%;height:100px}.test2508-container #contents{flex-direction:column;height:auto}.test2508-container #contents .notice,.test2508-container #contents .gallery{width:100%;height:auto}}