/* Reset & Base Styles */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.6;color:var(--text-color);background:var(--bg-color);transition:background-color .3s,color .3s}

/* CSS Variables for Theming */
:root{
  --primary:#3b82f6;--primary-hover:#2563eb;--bg-color:#ffffff;--surface:#f8fafc;--text-color:#1e293b;--text-muted:#64748b;--border:#e2e8f0;--shadow:0 1px 3px 0 rgb(0 0 0 / 0.1);--success:#10b981;--error:#ef4444;--warning:#f59e0b;--radius:8px;--primary-color:#3b82f6;--secondary-color:#64748b;--success-color:#10b981;--card-bg:#f8fafc;--border-color:#e2e8f0
}
[data-theme="dark"]{
  --bg-color:#0f172a;--surface:#1e293b;--text-color:#f1f5f9;--text-muted:#94a3b8;--border:#334155;--shadow:0 1px 3px 0 rgb(0 0 0 / 0.3)
}

/* Layout */
.container{max-width:1200px;margin:0 auto;padding:0 1rem}
.app-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}

/* Header */
.header{background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;backdrop-filter:blur(10px)}
.header-content{display:flex;justify-content:space-between;align-items:center;padding:1rem 0}
.logo{font-size:1.5rem;font-weight:700;color:var(--primary);display:flex;align-items:center;gap:.5rem;text-decoration:none}
.logo-icon{font-size:1.2rem}
.nav{display:flex;align-items:center;gap:1rem}
.theme-toggle{background:none;border:1px solid var(--border);border-radius:var(--radius);padding:.5rem;cursor:pointer;transition:all .2s}
.theme-toggle:hover{background:var(--border)}
.language-select{border:1px solid var(--border);border-radius:var(--radius);padding:.5rem;background:var(--bg-color);color:var(--text-color)}

/* Hero Section */
.hero{background:linear-gradient(135deg,var(--primary),#8b5cf6);color:white;padding:4rem 0;text-align:center}
.hero-title{font-size:2.5rem;font-weight:800;margin-bottom:1rem}
.hero-subtitle{font-size:1.2rem;margin-bottom:2rem;opacity:.9}
.hero-features{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}
.feature-tag{background:rgba(255,255,255,.2);padding:.5rem 1rem;border-radius:2rem;font-size:.9rem;backdrop-filter:blur(10px)}

/* App Section */
.app-section{padding:3rem 0;background:var(--bg-color)}
.input-panel,.output-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow)}
.input-panel h3,.output-panel h3{margin-bottom:1.5rem;color:var(--text-color);font-size:1.2rem}

/* Sample Input Groups */
.sample-input-group{margin-bottom:1.5rem}
.input-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}
.input-header label{font-weight:600;color:var(--text-color)}
.add-sample-btn,.add-non-match-btn{background:var(--primary);color:white;border:none;padding:.25rem .75rem;border-radius:var(--radius);cursor:pointer;font-size:.9rem;transition:background .2s}
.add-sample-btn:hover,.add-non-match-btn:hover{background:var(--primary-hover)}

/* Sample Items */
.sample-item{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}
.sample-input{flex:1;padding:.75rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-color);color:var(--text-color);font-size:.9rem}
.sample-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(59,130,246,.1)}
.sample-type{width:1.5rem;height:1.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:600}
.sample-type.match{background:var(--success);color:white}
.sample-type.non-match{background:var(--error);color:white}
.remove-sample{background:var(--error);color:white;border:none;width:1.5rem;height:1.5rem;border-radius:50%;cursor:pointer;font-size:.8rem}

/* Control Buttons */
.control-buttons{display:flex;gap:.75rem;flex-wrap:wrap}
.generate-btn{background:var(--primary);color:white;border:none;padding:.75rem 1.5rem;border-radius:var(--radius);cursor:pointer;font-weight:600;transition:background .2s}
.generate-btn:hover{background:var(--primary-hover)}
.clear-btn,.example-btn{background:var(--surface);color:var(--text-color);border:1px solid var(--border);padding:.75rem 1rem;border-radius:var(--radius);cursor:pointer;transition:all .2s}
.clear-btn:hover,.example-btn:hover{background:var(--border)}

/* Output Panel */
.regex-display{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}
.regex-result{background:var(--bg-color);border:1px solid var(--border);padding:1rem;border-radius:var(--radius);font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:.9rem;flex:1;overflow-x:auto}
.copy-btn{background:var(--primary);color:white;border:none;padding:.5rem;border-radius:var(--radius);cursor:pointer;font-size:.9rem}
.explanation-text{background:var(--bg-color);border:1px solid var(--border);padding:1rem;border-radius:var(--radius);margin-bottom:1rem;font-size:.9rem;line-height:1.5}
.test-input-group{display:flex;gap:.5rem;margin-bottom:1rem}
.test-input{flex:1;padding:.75rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-color);color:var(--text-color)}
.test-btn{background:var(--primary);color:white;border:none;padding:.75rem 1rem;border-radius:var(--radius);cursor:pointer}
.test-result{padding:.75rem;border-radius:var(--radius);font-weight:600}
.test-result.match{background:rgba(16,185,129,.1);color:var(--success);border:1px solid var(--success)}
.test-result.no-match{background:rgba(239,68,68,.1);color:var(--error);border:1px solid var(--error)}

/* Content Sections */
.how-to-use,.features,.faq{padding:3rem 0}
.how-to-use{background:var(--surface)}
.how-to-use h2,.features h2,.faq h2{text-align:center;margin-bottom:2rem;font-size:2rem;color:var(--text-color)}
.steps-grid,.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem}
.step,.feature-card{background:var(--bg-color);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;text-align:center;box-shadow:var(--shadow)}
.step-number{background:var(--primary);color:white;width:2rem;height:2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;font-weight:600}
.feature-icon{font-size:2rem;margin-bottom:1rem}
.step h3,.feature-card h3{margin-bottom:.5rem;color:var(--text-color)}

/* FAQ */
.faq-list{max-width:800px;margin:0 auto}
.faq-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:1rem;overflow:hidden}
.faq-item summary{padding:1rem;cursor:pointer;font-weight:600;background:var(--bg-color);border-bottom:1px solid var(--border)}
.faq-item p{padding:1rem;color:var(--text-muted)}

/* Footer */
.footer{background:var(--surface);border-top:1px solid var(--border);padding:2rem 0}
.footer-content{display:flex;flex-direction:column;gap:2rem;max-width:1000px;margin:0 auto}
.footer-section{margin-bottom:1.5rem}
.footer-section h4,.footer-section h5{margin-bottom:0.75rem;color:var(--text-color);font-weight:600}
.footer-section h4{font-size:1.1rem;border-bottom:1px solid var(--border);padding-bottom:0.5rem}
.footer-section h5{font-size:1rem;color:var(--primary);margin-top:1rem}
.footer-section p{color:var(--text-muted);line-height:1.5;margin-bottom:0.75rem;font-size:0.9rem}
.footer-section a{color:var(--primary);text-decoration:none;transition:color .2s}
.footer-section a:hover{color:var(--primary-hover)}

/* Copyright section */
.copyright-section{text-align:center;padding:1rem 0;border-bottom:1px solid var(--border)}
.copyright{font-weight:600;color:var(--text-color);font-size:1rem}

/* Disclaimer and Privacy sections */
.disclaimer-section,.privacy-section{border-bottom:1px solid var(--border);padding-bottom:1.5rem}
.disclaimer-item,.privacy-item{margin-bottom:1rem;padding:0.75rem;background:var(--bg-color);border-radius:var(--radius);border-left:3px solid var(--primary)}

/* Contact section */
.contact-section{text-align:center}

/* Responsive Footer */
@media (max-width: 768px) {
  .footer-content{padding:0 1rem}
  .disclaimer-item,.privacy-item{padding:0.5rem}
  .footer-section h4{font-size:1rem}
  .footer-section h5{font-size:0.9rem}
  .footer-section p{font-size:0.85rem}
}

/* Responsive Design */
@media (max-width:768px){
  .hero-title{font-size:2rem}
  .hero-subtitle{font-size:1rem}
  .app-grid{grid-template-columns:1fr;gap:1rem}
  .header-content{flex-direction:column;gap:1rem}
  .nav{flex-direction:row}
  .control-buttons{flex-direction:column}
  .control-buttons button{width:100%}
  .test-input-group{flex-direction:column}
  .regex-display{flex-direction:column;align-items:stretch}
  .steps-grid,.features-grid{grid-template-columns:1fr}
  .feature-tag{font-size:.8rem;padding:.4rem .8rem}
  .container{padding:0 .75rem}
}

@media (max-width:480px){
  .hero{padding:2rem 0}
  .hero-title{font-size:1.5rem}
  .app-section{padding:2rem 0}
  .input-panel,.output-panel{padding:1rem}
  .sample-item{flex-direction:column;align-items:stretch;gap:.25rem}
  .sample-type{align-self:flex-start;margin-top:.25rem}
}

/* Related Sites Section */
.related-sites-section {
    margin-bottom: 2rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--border-color);
}

.related-sites-section h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-size: 1.25rem;
}

.related-sites-description {
    color: var(--secondary-color);
    margin-bottom: 1.5rem;
    text-align: center;
    font-size: 0.9rem;
}

.sites-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.category {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
}

.category h4 {
    color: var(--primary-color);
    margin-bottom: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
}

.sites-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sites-list li {
    margin-bottom: 0.5rem;
}

.sites-list a {
    color: var(--primary-color);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.sites-list a:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}

.current-site {
    color: var(--success-color);
    font-weight: 500;
    font-size: 0.9rem;
}

/* モバイル対応 */
@media (max-width: 768px) {
    .sites-categories {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .category {
        padding: 0.75rem;
    }
}